注: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到目前還沒有支持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" base如下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" />原理很簡單就是在要模糊的圖片下面在定位一張相同的圖片,當要模糊的圖片縮小時,就會顯示出低下的那張圖。。。白邊就不見了,哈哈哈。。。你想到了嗎?
|
新聞熱點
疑難解答