如何设置一个声明的背景属性
如何设置一个声明所有的背景属性(如果不设置其中的某个值,也不会出问题。比如:background:#ff0000 url('smiley.gif');
也是允许的。)
1. 用法:(详细用法请往下看)
tagName / className / idName
{
background: #00FF00 url(../bgimage.gif) no-repeat fixed top;
}
注:所有浏览器都支持 background 属性.IE8 以及更早的浏览器不支持一个元素多个背景图像,IE7 以及更早的浏览器不支持 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。(跨浏览器的话,IE兼容性存在很大问题。)
2. 建议:
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。无继承性。
3. background支持的属性(包含属性值)如下:
-
background-color
规定要使用的背景颜色
(可能的值:
颜色名(比如red)
16进制的颜色名(比如#fff)
rgb类颜色名(比如:rgb(255,255,255)
透明类(默认值:transparent)
inherit类(规定应该从父元素继承 background-color 属性的设置)
) -
background-position
规定背景图像的位置
(可能的值:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
<如果您仅规定了一个关键词,那么第二个值默认为"center">
x% y%
<第一个值是水平位置,第二个值是垂直位置。
如果您仅规定了一个值,另一个值将是 50%>
xpos ypos
<表示的是像素,水平位置偏移量,垂直位置偏移量,相对于背景图像原来的位置进行偏移,只规定一个值的话,另外一个值默认为50%> -
background-image
规定要使用的背景图像
(可能的值:
none:不设置背景图像
在线文件:url(http://…)(通常是一个远程链接)
本地文件:url(…/sth.jpg)) -
background-repeat
规定如何重复背景图像
(可能的值:
repeat-x:背景图像水平重复,填满整个盒子
repeat-y:背景图像垂直重复,填满整个盒子
no-repeat:设置背景图像不重复,背景图像的大小等于自身大小
repeat(默认值):规定在水平和垂直方向重复应用背景图像
inherit:(继承)
) -
background-attachment
规定背景图像是否固定或者随着页面的其余部分滚动(可能的值:
scroll:随页面其余部分的活动而移动
fixed:固定位置,不会动
inherit:表继承
)
以下为css3新增属性(需要注意兼容性)
-
background-size
规定背景图片的尺寸
(可能的值:
x,y(高度,宽度)
%x,%y(高度=父元素高度*%x,宽度=父元素宽度*%y)
cover(完全覆盖整个父盒子,但可能某部分背景会被裁剪掉)
contain(高,宽自适应,背景填满整个区域)
) -
background-origin
(它的设置直接影响背景图片的定位,它和background-position不可以同时使用) 规定背景图片的定位区域
(可能的值:
padding-box:让景图像相对于内边距框来定位
content-box:让背景图像相对于内容(不包含边框,边距,填充)来定位
border-box:让背景图像相对于边框来定位
) -
background-clip
规定背景的裁剪区域
(可能的值:
border-box(默认值):从边框向外裁剪背景
padding-box:从内填充向外裁剪背景
content-box:从内容区域向外裁剪背景
no-clip:表示不裁切,和参数border-box显示同样的效果
)