css3中background新增的4个新的相关属性用法介绍

关于CSS中的background属性，许多重构人员已经相当熟悉。在CSS3中，这一属性不仅保留了之前的用法，还新增了四个强大的属性：background-clip、background-origin、background-size和background-break。这些属性提供了对背景图像的更精细控制。

background属性允许你添加多个背景图像，只需用逗号将它们分隔开。这是一个非常实用的功能，尤其是在需要创建复杂背景效果时。

接下来，让我们深入这四个新属性：

1. background-clip：这个属性用于指定背景的显示范围。它决定了背景图像或颜色是否延伸到元素的边框区域。不同的浏览器对这个属性的支持情况有所不同。例如，webkit引擎的Safari和Chrome浏览器、Mozilla的Gecko引擎以及Presto引擎（Opera 11.0以上）和 Trident引擎（IE9以上）都支持这个属性。它的值可以是border-box、padding-box、content-box或no-clip。其中，border-box表示从边框区域向外裁剪背景；padding-box表示从内边距边缘开始裁剪；content-box则从内容区域开始；而no-clip则相当于没有裁剪。

2. background-origin：这个属性指定了背景图像的绘制起点。它决定了背景图像相对于元素框的哪个位置开始显示。

3. background-size：用于控制背景图片的尺寸大小。你可以指定具体的宽度和高度，或者使用关键词（如cover或contain）来控制背景图像如何适应元素框的大小。

4. background-break：当内联元素具有背景图像时，这个属性决定了背景图像在分页时的处理方式。

通过灵活运用这些属性，你可以更精细地控制网页的背景效果。无论是创建多背景图像、调整背景大小、还是控制背景的显示范围，这些属性都能帮助你实现预期的效果。它们不仅提升了设计的灵活性，还让网页开发者在重构过程中有了更多的选择。

值得注意的是，某些浏览器可能需要使用特定的私有属性来实现这些功能，特别是在早期版本中。在开发时需要注意兼容性问题。