栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

web前端-CSS3属性学习(2)-背景属性(Background)

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

web前端-CSS3属性学习(2)-背景属性(Background)

   W3C中第二部分为背景属性(Background),共列举9个属性:background、background-attachment、background-color、background-image、background-position、background-repeat、background-clip、background-origin、background-size。背景属性在CSS中运用广泛,目前各大浏览器都支持9个属性。详细学习:

http://www.w3school.com.cn/cssref/index.asp。
下为简单介绍:


- 兼容性
background、background-attachment、background-color、background-image、background-position、background-repeat:
以上6个属性自CSS1开始使用。对于IE浏览器,只有IE9以上版本支持background的inherit属性值(注意:除个别情况,IE浏览器都不支持任何属性的inherit值)。

background-clip、background-origin、background-size:
以上3个属性为CSS3开始使用属性。IE9+、Firefox、Opera、Chrome 以及 Safari浏览器支持这三个属性。


- 关于背景系列属性中一些需要注意的细节
该系列属性应用广泛,有以下细节需要注意:
1、background-attachment
在W3C中对该属性的属性值描述为:
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
容易造成疑惑,具体到实际情况,使用fixed值时,在屏幕中滚动滚动条,背景相对屏幕静止;使用scroll值时,在屏幕中滚动滚动条,背景相对页面内容不动。
2、background-position
W3C中规定该属性的属性值可以使用字符串、长度值及百分比。对使用百分比来定位时,定位规则是:
当设置百分比为:a% b%。背景图像的水平方向a%(距图像左边)和背景图像的竖直方向b%(距图像上边)的点,位于容器内容器水平方向a%(距容器左边)和容器竖直方向b%(距容器上方)的点。(以上在W3C中没有描述,在《CSS权威指南》中有讲解)
并且,对background-position属性有特殊的兼容性要考虑:需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
3、CSS3新属性的使用
应该说,3个新属性都是对细节的完善,使背景设置更强大(定义背景绘制或背景图像的定位区域,修改背景图像的尺寸),合理使用可以使页面更完美。
对于background-clip、background-origin两个属性,三个属性值都相同:border-box、padding-box、content-box。
但默认值不同:
background-clip为border-box;
background-origin为padding-box。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243382.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号