用戶登錄  |  用戶注冊
首 頁源碼下載網絡學院最新源碼源碼排行屏蔽廣告
當前位置:新興網絡 > 網絡學院 > 網頁制作 > CSS

CSS Fliter濾鏡實現多種圖片特效

減小字體 增大字體 作者:佚名  來源:本站整理  發布時間:2010-12-18 22:15:28
HTML code運行代碼復制代碼編輯
<!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 Fliter濾鏡實現多種圖片特效</title>
<style>
.p1
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( grayScale="1");
}
.p2
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( mirror="1");
}
.p3
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( opacity="0.5");
}
.p4
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( XRay="1");
}
.p5
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( Invert="1");
}
.p6
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( Mask="1",MaskColor="#666666");
}
.p7
{
   filter : progid:DXImageTransform.Microsoft.BasicImage( Rotation="1");
}
p
{
  float:left;
  border:2px solid #000000;
  margin:0 10px 10px 0;
}
img
{
  width:250px;
}
</style>
</head>

<body>
  <p class="p1"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
  <p class="p2"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
  <p class="p3"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
  <p class="p4"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
  <p class="p5"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
  <p class="p6"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
  <p class="p7"><img src="http://www.suasdey.com/img/450/1.jpg" /></p>
</body>
</html>

Tags:CSS Fliter 濾鏡 特效

作者:佚名
  • 好的評價 如果您覺得此文章好,就請您
      0%(0)
  • 差的評價 如果您覺得此文章差,就請您
      100%(1)

網絡學院評論評論內容只代表網友觀點,與本站立場無關!

   評論摘要(共 0 條,得分 0 分,平均 0 分) 查看完整評論
秒速时时彩