background相关属性的详细介绍

background-origin: 规定 background-position 属性相对于容器的哪一部分来定位。

　　padding-box 背景图像相对于内边距框来定位；（默认）

　　border-box背景图像相对于边框盒来定位；

　　content-box背景图像相对于内容框来定位。

background-position：设置背景图像在容器显示的起始位置。

　　默认值：0 0（从背景图的左上点开始显示）；

　　取值:Int px  Int px;背景图的左上定点在容器的坐标位置，可以为负值。负值表示背景图左上点不在容器内，超出的部分隐藏。

　　如果只设置一个值，另一个值将为“居中”（50%/center）

　　如果采用百分数，则按如下公式计算坐标：

　　x：(容器的宽度—背景图片的宽度)*x百分比，超出的部分隐藏;y：(容器的高度—背景图片的高度)*y百分比，超出的部分隐藏。

　　 所以left/top等价于0%，right/bottom等价于100%（背景图的右边/底边和容器重合），center等价于50%（背景图在容器中间）。

background-size:设置背景图的大小（IE8不支持此属性）

　　百分比/length：若为百分数，背景图的尺寸为容器乘以百分数的乘积。只设一个，第二个为auto（以保持和原始背景图一样的长宽比例）。

《PHP设计模式指南》中文版

《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员

341

查看详情

　　如果都设为100%，则背景图会铺满容器，但长宽比率会发生变化。

　　contain:容器按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例放大，其任意一条边到达容器的边界为止，经常会导致另一边空白(有no-repeat时)。

　　cover:背景图按固定长宽比放大，至填充满整个容器为止（背景图短一点的那条边也到达容器边界）。有一部分的背景图会因超出容器而被切除。

IE8兼容：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

　　crop : 背景图大小不变，剪切图片以适应区域尺寸。

　　image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。

　　scale : 缩放背景图以适应区域的尺寸边界。

　　①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8

以上皆为个人理解，如有错误之处，欢迎留言指正。

以上就是background相关属性的详细介绍的详细内容，更多请关注php中文网其它相关文章！