请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 CSS3 查看内容

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

2013-11-14 21:58| 发布者: mydream| 查看: 1225| 评论: 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来对图片进行伸缩。


本例效果图:


使用css3制作书信页效果


完整参考代码如下:


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>background-origin</title>
  6. <style type="text/css">
  7. div {
  8.     height:600px;
  9.     width:416px;
  10.     border:solid 1px red;
  11.     padding:120px 4em 0;
  12.     background:url(images/p3.jpg) no-repeat;
  13.     -moz-background-origin:border;
  14.     -webkit-background-origin:border;
  15.     background-origin:border;
  16.     -moz-background-size:cover;
  17. -webkit-background-size:cover;
  18. background-size:cover;
  19.     overflow:hidden;
  20. }
  21. div h1 {
  22.     font-size:18px;
  23.     font-family:"幼圆";
  24.     text-align:center;
  25. }
  26. div p {
  27.     text-indent:2em;
  28.     line-height:2em;
  29.     font-family:"楷体";
  30.     margin-bottom:2em;
  31. }
  32. </style>
  33. </head>

  34. <body>
  35. <div>
  36.     <h1>春</h1>
  37.     <p>盼望着,盼望着,东风来了,春天的脚步近了。一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水长起来了,太阳的脸红起来了。小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草绵软软的。 </p>
  38.     <p>桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经满是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草丛里,像眼睛,像星星,还眨呀眨的。</p>
  39. </div>
  40. </body>
  41. </html>
复制代码

本文来源于HTML5星空,转载请注明出处。

鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:41 , Processed in 0.093588 second(s), 34 queries .

返回顶部