用網(wǎng)頁(yè)技術(shù)CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景漸變的四種代碼設(shè)置
發(fā)布時(shí)間:2010-07-08 02:03:01 作者:佚名
我要評(píng)論

用網(wǎng)頁(yè)技術(shù)CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景漸變的四種代碼設(shè)置。
一、從上往下漸變
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、從左上至右下漸變
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、從左往右漸變
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、從上往下漸變
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
舉例如:
<!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=gb2312" />
<title>背景漸變</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="600" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"> </td>
</tr>
</table>
</body>
</html>
復(fù)制代碼
代碼如下:body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、從左上至右下漸變
復(fù)制代碼
代碼如下:body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、從左往右漸變
復(fù)制代碼
代碼如下:body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、從上往下漸變
復(fù)制代碼
代碼如下:style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
舉例如:
復(fù)制代碼
代碼如下:<!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=gb2312" />
<title>背景漸變</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="600" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"> </td>
</tr>
</table>
</body>
</html>
相關(guān)文章
純CSS3實(shí)現(xiàn)網(wǎng)頁(yè)背景音樂(lè)動(dòng)畫代碼
CSS3網(wǎng)頁(yè)背景音樂(lè)動(dòng)畫代碼,滿天星動(dòng)漫網(wǎng)頁(yè)背景,集成播放器。歡迎下載使用2019-02-13CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景圖片自適應(yīng)全屏的方法
這篇文章主要介紹了CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景圖片自適應(yīng)全屏的方法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-07CSS 網(wǎng)頁(yè)背景漸變實(shí)現(xiàn)代碼
網(wǎng)頁(yè)背景漸變是經(jīng)常用到的效果,下面用的濾鏡,當(dāng)然在非IE下是沒(méi)效果的.2009-10-28- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:背景圖片/紋理有很多種使用方式,常常用于添加網(wǎng)站的最佳的最終美化?,F(xiàn)在它在CSS3中被重視,我們可以應(yīng)用多背景圖和背景圖片尺寸來(lái)實(shí)現(xiàn)更完美的效2009-04-02
- 這篇文章主要介紹了CSS控制網(wǎng)頁(yè)背景顏色的代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-21