CSS濾鏡示範(filter)附原始碼(靜態濾鏡)

來源:互聯網
上載者:User

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><style type="text/css"> body { margin: 0px; padding: 0px; } </p><p>table { font-size: 12px; border: 1px solid #0000FF; } </p><p>tr,td { padding: 0px; border: 1px solid #0000FF; } </p></style><p><strong>filter視覺濾鏡的種類</strong> </p><table><tr><td width="80">Alpha(透明度)</td><td width="80">Blur(模糊)</td><td width="80">Chroma(指定顏色透明)</td><td width="80">DropShadow(不透明陰影)</td><td width="80">FlipH&FlipV(翻轉)</td><td width="80">Glow(邊緣光暈)</td><td width="80">Gray(去色)</td><td width="80">Invert(底片效果)</td><td width="80">Mask(遮照效果)</td><td width="80">filter:Shadow(影子)</td><td width="80">Wave(波浪)</td><td width="80">Xray(輪廓加亮)</td></tr><tr><td height="140"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><p><strong>Alpha:</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">開始透明度(opacity):100<br />結束透明度(finishopacity):0<br />開始位置(startX,startY):(0,0)<br />結束位置(finishX,finishY):(50,50)</td><td width="200">開始透明度(opacity):70<br />結束透明度(finishopacity):20<br />開始位置(startX,startY):(0,0)<br />結束位置(finishX,finishY):(50,50)</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>Blur:</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">顯示原來的圖片,且以270度的方向模糊20px</td><td width="200">不顯示原來的圖片,且以90度方向模糊20px</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>Chroma</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">Chroma指定的字型顏色(我是CCHXP)變為透明</td></tr><tr><td></td><td></td></tr></table><p><strong>DropShadow</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">設定陰影顏色為淡綠色,往右移5px,往下移5px,且陰影呈不透明的效果。</td><td width="200">設定陰影顏色為粉紅色,往左移5px,往上移5px,且陰影呈不透明的效果。</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>FlipH&FlipV</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">設定圖片水平翻轉FlipH</td><td width="200">設定圖片垂直翻轉FlipV</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>Glow</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">設定圖片光暈顏色為黃色,強度為10</td><td width="200">設定圖片光暈顏色為紅色,強度為20</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>Gray</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">將圖片的顏色去除,以達到灰色效果</td></tr><tr><td></td><td></td></tr></table><p><strong>Invert</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">設定圖片顏色呈底片效果</td></tr><tr><td></td><td></td></tr></table><p><strong>Mask</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">設定圖片的屏蔽顏色為藍色</td></tr><tr><td></td><td></td></tr></table><p><strong>Shadow</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">設定圖片陰影顏色為綠色,往225度方向</td><td width="200">設定圖片陰影顏色為紅色,往135度方向</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>Wave</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">不顯示原始圖片,有5個振幅為20象素的波浪,其光的強度為30,波浪其始位置為50</td><td width="200">顯示原始圖片,有3個振幅為50象素的波浪,其光的強度為50,波浪起始位置為100</td></tr><tr><td></td><td></td><td></td></tr></table><p><strong>Xray</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">X光照片的效果</td></tr><tr><td></td><td></td></tr></table><p><strong>Gray&Invert&Xray比較</strong> </p><table><tr><td width="200">原始圖片</td><td width="200">Gray效果</td><td width="200">Invert效果</td><td width="200">Xray效果</td></tr><tr><td></td><td></td><td></td><td></td></tr></table><p>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.