手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css实现背景渐变与底部固定的蓝天白云示例
css实现背景渐变与底部固定的蓝天白云示例
摘要:

<?php

defined('_JEXEC') or die;

JHtml::_('behavior.framework', true);

//if(!$templateparams->get('html5', 0)):

?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

<head>

<>

<style type="text/css">

html {

height: 100%;

}

body

{

<>

height: 100%;

background-attachment: fixed;

margin:0;

padding:0;

background-repeat: no-repeat;

background: rgb(30,87,153); /* Old browsers */

background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 90%); /* FF3.6+ */

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+ */

background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* IE10+ */

background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 90%); /* W3C */

}

#body_foot

{

position:absolute; bottom:0px; right:0px;

background:url(http://127.0.0.1/LXX/pictures/cloud.png);/*,url(http://127.0.0.1/LXX/pictures/cloud2.png);*/

background-size:30% 180%;

-moz-background-size:63px 130px; /* 老版本的 Firefox */

background-repeat:repeat;

padding-bottom:1%;

margin:0;

}

#body_foot1

{

position:absolute; bottom:0px; right:0px;

background:url(http://127.0.0.1/LXX/pictures/cloud2.png);/*,url(http://127.0.0.1/LXX/pictures/cloud2.png);*/

background-size:40% 180%;

-moz-background-size:63px 130px; /* 老版本的 Firefox */

background-repeat:repeat;

padding-bottom:1%;

margin:0;

}

</style>

</head>

<body>

<div>

<p></p>

<p>rtyeryteryteryteryt</p>

<p>rtyeryt</p>

<p>ertyerytre</p>

<p>ertyerytre</p>

<p>ertyerytre</p>

<p>ertyerytre</p>

<p>ertyerytre</p>

<p>ertyerytre</p>

</div>

<div id="body_foot1">

<div id="body_foot">

</div>

</div>

</div>

</div>

</body>

</html>

其中主要有:

1、渐变背景的的设定:body{}

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

【css实现背景渐变与底部固定的蓝天白云示例】相关文章:

css实现body背景图片水平垂直居中方法

css实现li中文本超出行宽自动隐藏

css实现文字层浮在图片之上示例代码

纯css实现的下拉菜单只有边框底纹用到图片

css布局中的居中问题

CSS 网页背景渐变实现代码

css控制div置顶置底的例子

CSS设置DIV背景色渐变显示

使用css实现全兼容tooltip提示框

实现链接的虚线下划线效果

精品推荐
分类导航