CSS控制圖片、表格、背景顏色漸變示例
發(fā)布時間：2013-08-08 16:25:15 作者：佚名 
我要評論
我要評論CSS Filter 是 IE 特有的技術(shù)，應(yīng)盡量避免為 IE 單獨使用 Filter，如需要其某些特效，應(yīng)同時考慮其他瀏覽器，下面與大家分享下CSS如何控制圖片、表格、背景顏色漸變，感興趣的朋友可以參考下，希望對大家有所幫助
CSS Filter 是 IE 特有的技術(shù)，其他瀏覽器均不支持，所以為了最大的兼容性及標準化，應(yīng)盡量避免為 IE 單獨使用 Filter，如需要其某些特效，應(yīng)同時考慮其他瀏覽器，
圖片漸變
<img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)">
表格漸變
<table style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=0,finishY=100); BACKGROUND-COLOR: #ff0000">
<tr><td>12345678901234567890</td></tr></table>
背景漸變
.bgjb{
background:-webkit-gradient(linear,left,right,from(#BDD4FD) ,to(#FFFFFF));
background:-moz-linear-gradient(left,#BDD4FD,#FFFFFF,);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD4FD, endColorstr=#FFFFFF,GradientType=1 );
}/*同時考慮其他瀏覽器，
<div class="bgjb"></div>
<body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue">
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
style="FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
<div style="width:66;height:100%;float:left;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div>
<div style="width:66;height:100%;float:left;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#ffffFF,endColorStr=#46B5FF)"></div>
<div style="width:66;height:100%;float:right;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#ffffff,endColorStr=#46B5FF)"></div>
<div style="width:66;height:100%;float:right;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div>
若要使表格里面的元素不受影響
給里面的元素加上style="position:relative;"屬性, 這樣就不受影響了例如:
[html]
<div style="width:200px;height:200px;filter: Alpha(opacity=10);background-color:red;">
<div style="position:relative;">123123</div>
</div>
[/html]
圖片漸變
復(fù)制代碼
代碼如下:<img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)">
表格漸變
復(fù)制代碼
代碼如下:<table style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=0,finishY=100); BACKGROUND-COLOR: #ff0000">
<tr><td>12345678901234567890</td></tr></table>
背景漸變
復(fù)制代碼
代碼如下:.bgjb{
background:-webkit-gradient(linear,left,right,from(#BDD4FD) ,to(#FFFFFF));
background:-moz-linear-gradient(left,#BDD4FD,#FFFFFF,);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD4FD, endColorstr=#FFFFFF,GradientType=1 );
}/*同時考慮其他瀏覽器，
<div class="bgjb"></div>
<body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue">
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
style="FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
<div style="width:66;height:100%;float:left;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div>
<div style="width:66;height:100%;float:left;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#ffffFF,endColorStr=#46B5FF)"></div>
<div style="width:66;height:100%;float:right;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#ffffff,endColorStr=#46B5FF)"></div>
<div style="width:66;height:100%;float:right;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div>
若要使表格里面的元素不受影響
給里面的元素加上style="position:relative;"屬性, 這樣就不受影響了例如:
復(fù)制代碼
代碼如下:[html]
<div style="width:200px;height:200px;filter: Alpha(opacity=10);background-color:red;">
<div style="position:relative;">123123</div>
</div>
[/html]
相關(guān)文章
本文給大家分享一百種方法幫助大家解決CSS改變圖片顏色，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-09css控制背景示例(css設(shè)置背景圖片、設(shè)置背景顏色)
這篇文章主要介紹了css控制背景示例,這里提供了css設(shè)置背景圖片、設(shè)置背景顏色的方法,需要的朋友可以參考下2014-04-15css3實現(xiàn)背景顏色漸變讓圖片不再是唯一的實現(xiàn)方式
對于網(wǎng)頁設(shè)計師而言，顏色漸變在網(wǎng)頁設(shè)計中十分常見，而對于網(wǎng)頁制作者來說，通常的方法就是把漸變切成圖片來實現(xiàn)。伴隨著css3的出現(xiàn)，實現(xiàn)背景顏色漸變，圖片不再是唯一的2012-12-18- 這篇文章主要介紹了純css實現(xiàn)更改圖片顏色的技巧 ，實現(xiàn)方法很簡單，感興趣的朋友跟隨小編一起看看吧2019-07-03
