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 精灵)时,将十分重要。