css背景属性

CSS背景属性

【目录】

①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动；

②background-clip背景修剪------规定背景的绘制区域；

③background-origin背景来源------规定 background-position 属性相对于什么位置来定位；

④background-size背景尺寸------规定背景图像的尺寸；

【详解】

①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动

常见用法：设置固定的背景图像，使图像不会随着页面的其他部分滚动

属性值：scroll—默认值，背景图像会随着页面其余部分的滚动而移动；fixed—当页面的其余部分滚动时，背景图像不会移动

Css代码 收藏代码

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

②background-clip背景修剪------规定背景的绘制区域 属性值：border-box边界框；padding-box填充盒；content-box内容盒 border-box 背景被裁剪到边框盒。 测试 padding-box 背景被裁剪到内边距框。 测试 content-box 背景被裁剪到内容框。 测试 ③background-origin背景来源------规定 background-position 属性相对于什么位置来定位

属性值：与背景修剪属性值相同，border-box边界框；padding-box填充盒；content-box内容盒

下面来看个案例：

Html代码 收藏代码

background-origin:border-box:相对于边框定位

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

background-origin:content-box:相对于内容定位

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

④background-size背景尺寸------规定背景图像的尺寸；

【兼容】IE9及其他主流浏览器均支持

属性值：length（具体数值设置宽高）；percentage（百分比）；cover（覆盖）；contain（包含）;

length（具体宽度）：设置背景图像的高度和宽度；第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 auto

percentage（百分比）：以父元素的百分比来设置背景图像的宽度和高度；第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 auto

cover（覆盖）：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中

contain（包含）：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域