css3毛半透明效果白邊問題

標籤：style   http   color   使用   os   strong   

註：css3毛半透明效果應該很多人都知道怎麼實現，但是有個問題是圖片模糊了之後相當於縮小了，所以顏色深的圖片會出現白邊，這裡說下我參考網上的解決方式吧！

1、毛玻璃實現方法：

CSS3 blur濾鏡實現
如下測試代碼：

.blur {        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    }

相關HTML代碼如下：

<img src="mm1.jpg" /><img src="mm1.jpg" class="blur" />

 

需要注意目前Firefox不支援，其他些瀏覽器，如FireFox到目前還沒有支援CSS3 filter. 當然，要實現（比方說）FireFox 24瀏覽器上照片變模糊的效果，也是可以的。可以使用SVG的模糊濾鏡。
建立文命名為blur.svg的SVG檔案：

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">     <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs></svg>

如下CSS調用代碼：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

完整的css代碼

.blur {    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}

2、解決白邊方式

相關HTML代碼如下：

<img src="mm1.jpg" />

<img src="mm1.jpg" />

原理很簡單就是在要模糊的圖片下面在定位一張相同的圖片，當要模糊的圖片縮小時，就會顯示出低下的那張圖。。。白邊就不見了，哈哈哈。。。你想到了嗎？