css下背景渐变与底部固定的蓝天白云

  1 <?php
  2 defined('_JEXEC') or die;  
  3 
  4 
  5 JHtml::_('behavior.framework', true);  
  6 
  7 //if(!$templateparams->get('html5', 0)): 
  8     
  9 
 10 ?>  
 11 
 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 13 
 14 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
 15 <head>
 16 <!--jdoc:include type="head" /-->
 17 <style type="text/css">
 18 
 19 html {
 20     height: 100%;
 21 }
 22 body 
 23 {
 24 <!--
 25 background:url(http://127.0.0.1/joomla25/templates/usegear/images/bg.png);
 26 /*background-image:url(http://127.0.0.1/joomla25/templates/usegear/images/bg.png)*/
 27 /*background-size:100% 100%;*/
 28 
 29 background-size:100% 800%;
 30 
 31 background-repeat:no-repeat;
 32 padding-bottom:80px;
 33 
 34 -->
 35 
 36 
 37  height: 100%;
 38  background-attachment: fixed;
 39  margin:0;
 40 padding:0;
 41  background-repeat: no-repeat;
 42         background: rgb(30,87,153); /* Old browsers */
 43 
 44         background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 90%); /* FF3.6+ */
 45 
 46         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(90%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
 47 
 48         background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* Chrome10+,Safari5.1+ */
 49 
 50         background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* Opera 11.10+ */
 51 
 52         background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* IE10+ */
 53 
 54         background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* W3C */
 55 
 56 
 57 }
 58 
 59 #body_foot
 60 {
 61 
 62  position:absolute; bottom:0px; right:0px;
 63 
 64 
 65 
 66 
 67 background:url(http://127.0.0.1/LXX/pictures/cloud.png);/*,url(http://127.0.0.1/LXX/pictures/cloud2.png);*/
 68 background-size:30% 180%;
 69 -moz-background-size:63px 130px; /* 老版本的 Firefox */
 70 background-repeat:repeat;
 71 padding-bottom:1%;
 72 
 73  margin:0;
 74 
 75 }
 76 
 77 #body_foot1
 78 {
 79 
 80  position:absolute; bottom:0px; right:0px;
 81 
 82 
 83 
 84 
 85 background:url(http://127.0.0.1/LXX/pictures/cloud2.png);/*,url(http://127.0.0.1/LXX/pictures/cloud2.png);*/
 86 background-size:40% 180%;
 87 -moz-background-size:63px 130px; /* 老版本的 Firefox */
 88 background-repeat:repeat;
 89 padding-bottom:1%;
 90 
 91  margin:0;
 92 
 93 }
 94 
 95 
 96 </style>
 97 </head>
 98 <body>
 99 <div>
100 <p></p>
101 <p>rtyeryteryteryteryt</p>
102 <p>rtyeryt</p>
103 <p>ertyerytre</p>
104 <p>ertyerytre</p>
105 <p>ertyerytre</p>
106 <p>ertyerytre</p>
107 <p>ertyerytre</p>
108 <p>ertyerytre</p>
109 </div>
110 
111 <div  id="body_foot1"  style="position:absolute;bottom:1px;height:20%; width:100%; ">
112  <div  id="body_foot"  style="position:absolute;bottom:1px;height:100%; width:100%; ">
113    
114  
115  </div>
116 </div>
117 
118 
119 
120 
121 </div>
122 </div>
123   
124 </body>
125 </html>

View Code

其中主要有：
1、渐变背景的的设定：body{}

2、动态在低端的白云：设定了body_foot1和body_foot1中的循环图片显示定义，以及div动态底端的设定。以及嵌套div掩盖白云图片规律性显示。

posted on 2013-06-23 17:00 USEGEAR 阅读(843) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

USEGEAR

导航

公告

统计

搜索

常用链接

最新随笔

我的标签

合集 (3)

随笔分类 (367)

随笔档案 (326)

文章分类 (4)

文章档案 (4)

delphi

other

关注的技术博客

我喜欢的博客

综合技术

阅读排行榜

推荐排行榜

css下背景渐变与底部固定的蓝天白云