一文搞定background属性及属性值，css背景属性全家桶

一文搞定background属性及属性值，css背景属性全家桶

盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。

从2D视角看盒模型示意图：

从3D视角看盒模型示意图：

背景图片在z轴上比背景颜色更靠近用户，背景图片在完全不透明的情况下，会完全遮盖住背景颜色。

背景图片的定位参考系与背景裁剪：

background-origin的默认值是padding-box，代表的是背景图片开始的原点。

background-origin:border-box; 图像从边框开始显示，表示以表框左上角为原点展开背景图片。

background-origin:padding-box; 图像从内边距开始显示（默认），表示以内填充区左上角为原点展开背景图片。

background-origin:content-box; 图像从内容开始显示，表示以内容区的左上角为原点展开背景图片。

背景裁剪的默认值是border-box，背景从边框（包括border区域）开始裁剪，表示裁剪超出边框区的内容。

background-clip:border-box; 图像从边框（包括border区域）开始裁剪（默认），表示裁剪超出边框区的内容。

background-clip:padding-box; 图像从内边距（包括padding）开始裁剪，表示裁剪超出内填充区的内容。

background-clip:content-box; 图像从内容（包括content）开始裁剪，表示裁剪超出内容区的内容。

还有一个取值是background-clip:text，表示文本剪裁(字体加背景)。

background-clip的兼容写法：

/*Firefox3.6-*/

-moz-background-clip: border-box || padding-box || context-box || no-clip

/*Webkit*/

-webkit-background-clip: border-box || padding-box || context-box || no-clip || text

/*opera*/

-o-background-clip: border-box || padding-box || context-box || no-clip

/*W3C标准 Firefox4.0+*/

background-clip: border-box || padding-box || context-box || no-clip || text

浏览器兼容问题：

-webkit- 谷歌浏览器的内核标识码

-moz- 火狐浏览器的内核标识码

-o- 欧朋浏览器的内核标识码

-ms- IE浏览器的内核标识码

注意：要和-webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色，一起使用。

/*注意：使用border-box的时候，border颜色必须是rgba颜色，不然会没有效果*/

对于background-clip和background-origin的区别在于，background-clip是针对背景图片的裁剪，而background-origin则是设置背景图片的起始点。

background-size的设置方法：

设置背景图片高度和宽度（10px 30px）。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)。

将计算相对于背景定位区域的百分比(30% 30%)。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"。

cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。背景图不会变形，但是超出区域会被裁减掉。

contain:此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小。

background-position属性的使用：

background-position总共有5个属性，分别是top、right、bottom、left、center，这个5个属性可以单独使用，也可以两两使用。单独使用时，默认第二个参数为center。

背景图片的位置：

属性值： x y

背景图片的位置调整可以使用xpos ypos（都为正值时，往右往下移动）和单词（仅指定一个关键字，其他值将会是"center"）。

百分比：x% y%，第一个值是水平位置，第二个值是垂直位置。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％。

给div设置banner背景，div只设置高度：

正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：

给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。

背景图片的固定或滚动：

background-attachment属性支持的值以及含义：...

文字效果的实现：

text-shadow凹凸文字效果：...

含有背景图片的文字、渐变色无缝滚动的文字：

background-clip:text 背景显示在文字内部，text属性兼容问题：...

混合模式的定义：

background-blend-mode属性定义了背景层的混合模式（图片与颜色）。

可能的值：...

backface-visibility属性的定义：

backface-visibility 属性定义当元素不面向屏幕时是否可见。

渐变的使用：

渐变：background-image：...

线性渐变和径向渐变的使用示例：

线性渐变示例图：...

径向渐变示例图：...

重复渐变的使用：...

background简写：

background提供简写用法，即在一个声明中可设置所有的背景属性。

所有属性如下：...

建议顺序：...

背景图片与img标签的对比：

背景图片不占用content内容部分，而img标签会占用。

背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片，何时使用img标签取决于实际情况，可根据需要选择。2024-08-20