css3如何使用background-origin属性制作书信背景页效果

这篇文章主要介绍了css3如何使用background-origin属性制作书信背景页效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的泗阳网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

css3中background属性的功能更加强大了，它允许在同一个元素内叠加多个背景图像。

首先介绍一下background属性：

background ：

取值：

：指定或检索对象的背景图像。

：指定背景的显示区域。参见background-origin

：指定背景的裁剪区域。参见background-clip

：设置或检索对象的背景图像是否及如何重复铺排。

：指定背景图片的大小。参见background-size：设置或检索对象的背景图像位置。

background-clip ：

取值：border-box：从border区域向外裁剪背景。padding-box：从padding区域向外裁剪背景。content-box：从content区域向外裁剪背景。no-clip：从border区域向外裁剪背景。

background-origin ：

取值：border：从border区域开始显示背景。padding：从padding区域开始显示背景。content：从content区域开始显示背景。

说明：

用来决定 background-position 计算的参考位置。

background-size ：

取值：：由浮点数字和单位标识符组成的长度值。不可为负值。：取值为0%到100%之间的值。不可为负值。

说明：

设置背景图片的大小。

指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

完整参考代码如下：

感谢你能够认真阅读完这篇文章，希望小编分享的“css3如何使用background-origin属性制作书信背景页效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!