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

2013-11-14 21:58| 发布者: mydream| 查看: 2104| 评论: 0|原作者: mydream

摘要: css3中background属性的功能更加强大了，它允许在同一个元素内叠加多个背景图像。首先介绍一下background属性： background ：取值： background-image：指定或检索对象的背景图像。 background-origin：指定 ...

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

background ：

取值：
<background-image>：指定或检索对象的背景图像。
<background-origin>：指定背景的显示区域。参见background-origin
<background-clip>：指定背景的裁剪区域。参见background-clip
<background-repeat>：设置或检索对象的背景图像是否及如何重复铺排。
<background-size>：指定背景图片的大小。参见background-size<background-position>：设置或检索对象的背景图像位置。

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 ：

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

说明：

设置背景图片的大小。

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

本例效果图：

完整参考代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-origin</title>
<style type="text/css">
div {
height:600px;
width:416px;
border:solid 1px red;
padding:120px 4em 0;
background:url(images/p3.jpg) no-repeat;
-moz-background-origin:border;
-webkit-background-origin:border;
background-origin:border;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
overflow:hidden;
}
div h1 {
font-size:18px;
font-family:"幼圆";
text-align:center;
}
div p {
text-indent:2em;
line-height:2em;
font-family:"楷体";
margin-bottom:2em;
}
</style>
</head>
<body>
<div>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 </p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p>
</div>
</body>
</html>