详解CSS3新增的背景属性CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现css浮动 float属性详解css选择器四大类：基本、组合、属性、伪类js判断并告知支持css属性（值）的 情况分析

先前，再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个位置的哪个地方开始裁剪，来达到其相应的效果，看代码

没有背景剪裁 (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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.
background-clip: content-box:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.

效果图：

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

背景图像边界框的相对位置
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.
背景图像的相对位置的内容框
Lorem Ipsum Dolor
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此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

总结

以上所述是小编给大家介绍的CSS3新增的背景属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！