CSS3新增的背景属性有哪些 CSS3新增的背景属性介绍

作者：袖梨 2022-06-25

本篇文章小编给大家分享一下CSS3新增的背景属性介绍，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

在css里面我们知道background的几个属性color，image，repeat，attachment，position，这些都是我们再css里面常用的，那么css3新增的属性有哪些呢？

CSS3新增属性：background-clip ，background-origin ， background-size

1.background-clip

背景的剪裁属性，是从指定位置开始绘制。

2.background-origin

background-Origin属性指定了背景图像的位置区域。

** 上面两个的属性值都是border-box， padding-box ， content-box（这里建议要对盒子模型有足够了解，那么在这里就看这3个属性值就一清二楚了），或者看下图：

background-clip就是相当于再这3个位置的哪个地方开始裁剪，来达到其相应的效果，看代码

Title

没有背景剪裁 (border-box没有定义):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-clip: padding-box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

background-clip: content-box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

效果图：

而background-origin则是再那个区域显示背景，看代码

Title

背景图像边界框的相对位置

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

背景图像的相对位置的内容框

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

效果：

3.background-size

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中background-size让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

其属性值：

①.length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

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

③.cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

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