CSS控制圖片、表格、背景顏色漸變示例
發(fā)布時(shí)間:2013-08-08 16:25:15 作者:佚名
我要評論

CSS Filter 是 IE 特有的技術(shù),應(yīng)盡量避免為 IE 單獨(dú)使用 Filter,如需要其某些特效,應(yīng)同時(shí)考慮其他瀏覽器,下面與大家分享下CSS如何控制圖片、表格、背景顏色漸變,感興趣的朋友可以參考下,希望對大家有所幫助
CSS Filter 是 IE 特有的技術(shù),其他瀏覽器均不支持,所以為了最大的兼容性及標(biāo)準(zhǔn)化,應(yīng)盡量避免為 IE 單獨(dú)使用 Filter,如需要其某些特效,應(yīng)同時(shí)考慮其他瀏覽器,
圖片漸變
<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 );
}/*同時(shí)考慮其他瀏覽器,
<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 );
}/*同時(shí)考慮其他瀏覽器,
<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改變圖片顏色,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-11-09
css控制背景示例(css設(shè)置背景圖片、設(shè)置背景顏色)
這篇文章主要介紹了css控制背景示例,這里提供了css設(shè)置背景圖片、設(shè)置背景顏色的方法,需要的朋友可以參考下2014-04-15css3實(shí)現(xiàn)背景顏色漸變讓圖片不再是唯一的實(shí)現(xiàn)方式
對于網(wǎng)頁設(shè)計(jì)師而言,顏色漸變在網(wǎng)頁設(shè)計(jì)中十分常見,而對于網(wǎng)頁制作者來說,通常的方法就是把漸變切成圖片來實(shí)現(xiàn)。伴隨著css3的出現(xiàn),實(shí)現(xiàn)背景顏色漸變,圖片不再是唯一的2012-12-18- 這篇文章主要介紹了純css實(shí)現(xiàn)更改圖片顏色的技巧 ,實(shí)現(xiàn)方法很簡單,感興趣的朋友跟隨小編一起看看吧2019-07-03