建站软件 优化软件 编程软件 网页辅助 站群程序 网站程序 图像处理 资源教程 字体下载 推荐软件


您的位置:首页 > div+css > css背景属性background的用法

css背景属性background的用法

时间:2018-01-25 21:31:25  来源:免费模板网 作者:风雪 阅读次数 tagscssbackground

background 属性用于定义 HTML 元素的背景。

  定义元素背景效果的 CSS 属性有以下五种:

    ①:background-color

    ②:background-image

    ③:background-repeat

    ④:background-position

    ⑤:background-attachment

  (1)、background-color:背景颜色

  background-color 属性定义了元素的背景颜色。页面的背景颜色可以使用 body 元素选择器进行定义:

body{
  background-color:gray;
 }

CSS 中,颜色值通常使用以下方式定义:

①:十六进制,如:"#ff0000",类似这样的形式,可以缩写为:"#f00"。

②:RGB,如:"rgb(255,0,0)"。

③:颜色名称,如:"red"。

(2)、background-image:背景图像

background-image 属性描述了元素的背景图像。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体,页面背景图片设置如下:

body{
 background-image:url('images/test.jpg');
}

(3)、background-repeat:背景图像设置水平或垂直平铺或不平铺

默认情况下,background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:background-repeat:repeat-x,定义垂直方向平铺语法:background-repeat:repeat-y。

在使用背景图像时,默认会平铺重复显示,这样不仅不具有美感,还会影响文本的排版。如果不想让图像平铺,并且只显示一次,那么就这样定义:background-repeat:no-repeat。

<head>
<style>
body{
    background-image:url('images/wallpaper.jpg');
    background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>

(4)、background-position:背景图像设置定位

在上面的例子中,背景图像与文本显示在同一个位置,这样不利于文本的阅读,为了让页面排版更加合理,可以利用 background-position 属性改变图像在背景中的位置:

 body{
 background-image:url('images/wallpaper.jpg');
 background-repeat:no-repeat;
 background-position:right top;
}

此时,背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置,如果背景图像要重复,也将从这一点开始。

background-position 属性值可以使用关键字表示:left | right | center,如果仅指定一个关键字,其他值将会是 "center"。该方法可能的值的有:left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。

background-position 属性值也可以使用百分比表示:x%y%,默认值为:0%0%,第一个值是水平位置,第二个值是垂直位置。左上角是 0%0%,右下角是 100%100%。如果仅指定了一个值,其他值将是 50%。

background-position 属性值还可以使用长度单位精确表示,单位可以是像素或任何其他 CSS 单位,通常都使用像素。第一个值是水平位置,第二个值是垂直位置,左上角是 0 0,两个数值之间用空格隔开,例如:background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px,垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移,如果取负值,则向上向左偏移。该方法在制作 CSS 雪碧图(即 CSS Sprite,也叫做 CSS 精灵)时,将十分重要。


本文地址:https://www.freemoban.com/bjrm/2018/0125/2948.html

猜你喜欢
栏目推荐
模板推荐

Copyright:www.freemoban.com 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,我们会及时删除侵权内容,联系QQ:1615187561 谢谢合作!