CSS background属性详解

最新推荐文章于 2024-09-23 11:30:52 发布

原创最新推荐文章于 2024-09-23 11:30:52 发布 · 2.3k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

这篇博客详细介绍了CSS的background属性，包括background-clip（背景裁剪）、background-origin（背景定位原点）、background-size（背景图片大小）的用法，并特别强调了如何设置和理解这两个属性。此外，还讨论了如何使用background-size的cover和contain值，以及如何设置和组合多重背景图像。通过实例解析，帮助开发者更好地控制网页元素的背景展示。

background是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

此属性是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

属性	说明	取值
background-attachment	决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动	fixed、scroll、local
background-clip	设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面	border-box、padding-box、content-box、text
background-origin	规定了指定背景图片background-image 属性的原点位置的背景相对区域	border-box、padding-box、content-box
background-color	设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一
background-image	用于为一个元素设置一个或者多个背景图像
background-position	为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的
background-repeat	定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复
background-size	设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸

1. background-position

可选值：两个参数，水平位置和垂直位置。如果只有一个值，第二个值为“center”。
默认值是元素的左上顶角。可以使用位置关键字（top，right，bottom，left，center）。百分比（以元素大小为基值）。像素值。

2. background-size

可选值：两个数值，如果只有一个值，第二个值为auto。
默认是图片自身大小。可以使用像素值，百分百（以元素大小为基值）。
cover：等比例缩放图片，覆盖这个元素。类似与windows中桌面背景的“填充”。
contain：等比例缩放图片，适应元素的宽或者高。类似于windows中桌面背景的“适应”。

注意：如果同时设置了“position”和“size”两个属性，应该用左斜杠“/”，而不是用空格把两个参数值隔开：“position/size”。

3. 多背景设置

多背景的写法：使用逗号“，”隔开，继续写背景属性。

background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;

也可以具体属性单独设置：background-image：url（image url 1），url（image url 2）；

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

标签

#css