图解CSS3 读书笔记——背景

最新推荐文章于 2025-06-08 15:25:53 发布

转载最新推荐文章于 2025-06-08 15:25:53 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000004038805

本文深入探讨了CSS背景属性的基本概念、常见属性及其应用，包括颜色、图片、重复、位置、裁剪、尺寸等。通过实例演示，帮助开发者掌握如何灵活运用CSS背景属性，提升网页设计的美观性和功能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS背景属性

基本属性

background-color: 默认值为transparent，可以以"颜色名"、"rgb(css3新增rgba)"、"hls(css3中新增hlsa)"、"十六进制"的方式设置颜色值
background-image: none(默认) || url()
background-repeat: repeat(默认) || repeat-x || repeat-y || no-repeat
background-attachment: scroll(默认) || fixed

注意：background-attachment取值为fixed时，需要运用在html或body标签上。使用在其他标签上没有固定效果。

background-position：水平位置垂直位置

说明：一般来说，背景图片的左上角是和元素的左上角对齐的，background-position这一属性可以改变背景图片与元素的对齐点。

先来看看水平位移和垂直位移单位都是px的时候：

background-position: 30px 50px

以元素左上角为坐标原点，水平向右延展方向为x轴正轴，垂直向下延展方向为y轴正轴。那么此时图片的左上角与元素的(30,50)坐标点对齐。

现在来看百分比的情况：
计算方式为：
水平偏移x：（元素宽度-图片宽度）*百分比
垂直偏移y：（元素高度-图片高度）*百分比

此时同样的，图片左上角跟计算出的元素的(x,y)坐标点对齐。

当然啦。实际做项目的时候我们不会这么麻烦的去计算，这里只是总结一下它的计算方式。
实际项目中只需要记住：

1、背景图片水平垂直居中:

background-position: center

2、雪碧图情况：
原理跟使用px的情况相似，这里不赘述了。可以去看看这篇文章：Click here

css3新增属性

background-origin: 指定绘制背景图片的起点
background-clip: 指定背景图片的显示范围
background-size: 指定背景图片的尺寸大小（很常用）
background-break: 指定内联元素的背景图片进行平铺时的循环方式

CSS3 background-origin

该属性主要用来决定背景图片与元素对其原点的参考点。默认是以元素左上角为坐标原点进行对其，这一属性可以打破这一格局。

background-origin有三个属性：
padding-box：默认值。表明图片的原点和元素padding外边缘（border的内边缘）进行对齐。
border-box：表明图片的原点和元素border的外边缘进行对齐。
content-box：表明图片的原点和元素content外边缘（padding的内边缘）进行对齐。

浏览器兼容性：
现代浏览器都支持和ie9+。但是使用时还需要加上浏览器前缀。
如下：

/*old Webkit and Gecko*/
-moz-background-origin: padding || border|| content;
-webkit-background-origin: padding || border|| content;
/*new Webkit and Gecko*/
-moz-background-origin: padding-box || border-box || content-box;
-webkit-background-origin: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box; /*w3c标准*/

例子：
1、padding-box

2、border-box

3、content-box

CSS3 background-clip

该属性用来定义背景图片的裁剪区域。这样说得会比较抽象，稍后会通过实例为大家说明。

属性：

border-box: 背景图片在边框下(边框外边缘，不会超出边框),默认值
padding-box: 背景延伸到padding的外边缘，但不会超出边框范围(默认)
content-box: 背景仅在内容区描绘，不会超过padding和边框范围

是不是觉得似曾相识呢？没错，就是background-origin刚刚提到的三个属性。

浏览器兼容性：

在Gecko内核浏览器（FF3.6-）不支持content-box，并且使用border和padding来代替标准语法中的border-box和padding-box
safari5能够在标准属性中支持border-box和padding-box，但content-box属性值也需要加上-webkit-前缀

我们先来看看默认情况下如果背景图片超出了元素的范围，元素会对背景图片进行怎样的裁剪。
测试图片200宽200高。

repeat：
/代码：/
.box {

   width: 260px;height: 150px;
   border: 10px dashed lightgreen;
   background-color:slateblue;
   background-image: url(img/test.jpg);
   background-repeat: repeat;

}
效果：

no-repeat：
/代码：/
.box {
```
  background-repeat: repeat; 
```
}

效果：

默认情况下：

背景平铺时会填满整个元素，包括border的范围。此时border-color完全在background-image下，而且background-image从元素边框左上角起到元素边框右下角止。但background-position的起始点却是从元素的内部补白（padding）外边缘开始。

背景不平铺时border-color从元素边框左上角起到元素边框的右下角边缘止，background-image从内容补白（padding）外边缘的左上角起到元素边框的右下角止。

现在使用background-clip属性可以改变背景图片的填充范围。

默认情况下，background-clip为border-box。
background-clip为padding-box时：背景图片的填充范围为，元素padding外边缘左上角到元素padding外边缘右下角。注意此时背景颜色的填充范围也会改变。

平铺时：

不平铺：

background-clip为content-box时：背景图片的填充范围为，元素padding内边缘左上角到元素padding内边缘右下角。注意此时背景颜色的填充范围也会改变。

平铺时：

不平铺：

CSS3 background-size

现在来看一个用得相对比较多的属性。background-size属性可以用来指定背景图片的尺寸，可以控制背景图片在水平和垂直两个方向上的缩放，也可以控制图片拉伸覆盖背景区域的方式。背景图片能够自适应元素盒子的大小。

属性：

background-size: auto || <length> || <percentage> || cover || contain

auto: 默认值。将保持背景的原始高度和宽度。
<length>: 取具体的整体值（如px），将以设定的宽高值对背景图片进行缩放。
<pencentage>: 取值为百分值，可以是0% ~
100%。注意这个值是对于元素的宽度进行计算的，计算出来的宽高值再作为背景图片的宽高值对背景图片进行缩放。
cover: 将背景图片宽度或者高度放大，以使图片宽高能适应铺满容器宽高较大的一方，但不同于background-cover:100% 100%的方式。

1、宽度为100，高度为250
2、宽度为250，高度为100

3、宽度为80，高度为100

contain:保持背景图像本身的宽高比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。

当background-size只取一个值时，另一个值自动设为auto。

浏览器兼容性：
ie9+以及其他主流。老版本浏览器需要加上前缀。

background-size的其他适用场合：

在流体布局或者响应式布局中，确保背景图像能始终适配容器大小。
对于平铺的重复性背景图像，确保背景图像不会有截断效果。
解决Retina屏幕双倍像素下背景图像模糊问题。（将大图缩小一倍）
使用链接或者列表元素的背景图像能和文本一起进行缩放。

其他新增CSS3背景属性

因为这两个属性浏览器兼容性比较差，项目中使用较少，所以这里不进行具体总结了。收集了一些相关的文章供有兴趣的小伙伴进行阅读。

1、内联元素背景图像平铺循环方式：暂无文章
2、CSS3多背景：Click here