Css filter:滤镜修饰图片实例

2020-01-27 14:20:25

字体：大中小

来源：转载

供稿：网友

Css filter:滤镜修饰图片实例，同一张照片，通过定义不同的CSS修饰效果，会获得让你意想不到的效果。其实这里仅使用了CSS中的Fliter滤镜，设置Fliter不同的参数，得到不同的光照角度，出来的效果当然也就不一样了。

<!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><title>css属性实例</title><style>.p1{   filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style="0" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );}.p2{   filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style="1" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );}.p3{   filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style="2" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );}.p4{   filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style="3" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );}p{  float:left;  height:250px;  width:300px;  border:2px solid #000000;  margin:0 10px 10px 0;  background:#666666;}img{  width:250px;} </style></head><body>  <p class="p1">    <img src="/d/file/p/2020/01-27/f3681c250d87272ca56c7fa9a0f305a8.jpg" alt="这里是一个图片" /></p>  <p class="p2">    <img src="/d/file/p/2020/01-27/f3681c250d87272ca56c7fa9a0f305a8.jpg" alt="这里是一个图片" /></p>  <p class="p3">    <img src="/d/file/p/2020/01-27/f3681c250d87272ca56c7fa9a0f305a8.jpg" alt="这里是一个图片" /></p>  <p class="p4">    <img src="/d/file/p/2020/01-27/f3681c250d87272ca56c7fa9a0f305a8.jpg" alt="这里是一个图片" /></p></body></html>

上一篇：Fliter 图片修饰特效之二，CSS教程

下一篇：CSS实现“三角形箭头”布局的一些实例代码

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注