CSS background 属性
2015-12-17 13:43
691 查看
定义和用法
background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
默认值: | not specified |
---|---|
继承性: | no |
版本: | CSS1 + CSS3 |
JavaScript 语法: | object.style.background="white url(paper.gif) repeat-y" |
实例
如何在一个声明中设置所有背景属性:body { [code]background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
[/code]
亲自试一试
浏览器支持
所有浏览器都支持 background 属性。注释:IE8 以及更早的浏览器不支持一个元素多个背景图像。
注释:IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。
可能的值
值 | 描述 | CSS |
---|---|---|
background-color | 规定要使用的背景颜色。 | 1 |
background-position | 规定背景图像的位置。 | 1 |
background-size | 规定背景图片的尺寸。 | 3 |
background-repeat | 规定如何重复背景图像。 | 1 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-clip | 规定背景的绘制区域。 | 3 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-image | 规定要使用的背景图像。 | 1 |
inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
亲自试一试 - 实例
所有背景属性在一个声明之中本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。相关文章推荐
- Css3属性选择器
- [Selenium]中使用css选择器进行元素定位
- CSS3实现关闭按钮
- css3实现不一样的下拉菜单框
- CSS书写规范、顺序
- css hack 大全
- CSS3 渐变(Gradients)
- ionic中应用sass
- css链接地址 base href
- div+css
- [小技巧]CSS---垂直方向的定位
- CSS 设置placeholder属性
- css:border
- css3 圆角
- 你应该知道的9个优秀的CSS框架
- 10008---CSS Background背景
- 关于css中的position定位问题
- css
- 用CSS来定义<p>标签,要求实现以下效果:字体颜色再IE6下为黑色,IE7下为红色,IE8下为绿色,其他浏览器下为黄色。
- 网页设计html+css兼容性问题处理办法汇总