研究了background相关的属性,虽然很简单,但有些还是不知道,整理出来系统的学习一下,也会更好的掌握这些知识点(细节决定成败,哈哈)
background相关的属性有(把比较常用的放在前面不做过多的解释):background、background-color、background-image、background-repeat、background-attachment、background-origin、background-blend-mode、background-clip、background-position、background-size、background-position-x、background-position-y
background 简写属性在一个声明中设置所有的背景属性。所有浏览器都支持该属性
可以设置的值有:
- background-color:设置元素的背景颜色
- background-position:设置背景图像的起始位置
- background-size:设置背景图像的尺寸
- background-repeat:设置是否及如何重复背景图像
- background-origin:background-position 属性相对于什么位置来定位。
- background-clip:规定背景的绘制区域
- background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
- background-image:为元素设置背景图像
- background-blend-mode
- background-position-x、background-position-y
如果不设置其中的某个值,也不会出问题,顺序也无所谓先后。通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。(IE8 以及更早的浏览器不支持一个元素多个背景图像。IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。),看个在线的例子:试一试
background-color和background-image,就不在这里详细的说了,毕竟经常用,都知道吧(注意:background-color没有inherit值)
可以设置多张图片作为背景(IE8 以及更早的浏览器不支持一个元素多个背景图像。)
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
background-repeat:repeat(默认值)|repeat-y|repeat-x|no-repeat|inherit(IE不支持该值)(所有浏览器都支持该属性)
background-attachment:scroll(默认值)|fixed|inherit(IE不支持该值)(所有浏览器都支持该属性)background-position:0% 0%(默认值)【两个值,可以是方向(left、top、bottom、center、right)的设置,也可以是百分比的形式,还可以是像素大小的设置,如果只设置一个值,那么第二个默认为center(50%)】,例:left top|top(类似于top center)|20% 20%|40px 40px|40px(类似于40px 50%)。也可以是inherit(但IE不支持该值)
嗯、主要讲讲下面的
background-size
background-size:length|percentage|cover|contain;
- length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
- percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
- cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-size:80px 60px; background-size:80% 60%; background-size:cover; background-size:contain;
div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
兼容性:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
background-origin:
规定 background-position 属性相对于什么位置来定位。注意:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
background-origin: padding-box|border-box|content-box;
- padding-box:背景图像相对于内边距框来定位
- border-box:背景图像相对于边框盒来定位
- content-box:背景图像相对于内容框来定位
background-clip:padding-box|border-box|content-box;
兼容性:IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
下面的不常用,但还是蛮有意思的
background-blend-mode :
background-blend-mode :blend,混合的意思喽,我的理解就是把两种(及以上)的背景进行混合
可以是两个图像背景,也可以是一个颜色和一个图像的背景(但我们知道颜色最多只能有一个了),看下面的写法
background:url("../img/img2.jpg"),url("../img/img.jpg") ; background-blend-mode: exclusion ; }
background:url("../img/img2.jpg"),#ef3239 ; background-blend-mode: exclusion ; }
混合模式应该按background-image CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。
background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity /* 单值 */ background-blend-mode: normal; /* 双值,每个背景一个值 */ background-blend-mode: darken, luminosity; background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: unset;
兼容性:这个兼容性不太好,IE下不支持。其他浏览器也要高版本的才支持
属性 | Chrome | IE | Firefox | Safire | Opera |
---|---|---|---|---|---|
background-blend-mode | 35.0 | 不支持 | 30.0 | 7.1 | 22.0 |
background-position-x和background-position-y
background-position-x : length | left | center | rightbackground-position-y : length | left | center | right
取值:
length :百分数 | 由浮点数字和单位标识符组成的长度值
left :居左
center:居中
right :居右
兼容性:
chrome和IE支持,写法:
background-position-x:30px;-ms-background-position-x:30px;
background-position-y:30px;-ms-background-position-y:30px;
firefox不支持这两个属性,如果要兼容,需要写成:
background-position:30px 30px;
参考:http://www.w3school.com.cn/cssref/pr_background.asp