>웹 프론트엔드 >HTML 튜토리얼 >css3毛玻璃效果白边问题_html/css_WEB-ITnose

css3毛玻璃效果白边问题_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:01:201442검색

注: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" / alt="css3毛玻璃效果白边问题_html/css_WEB-ITnose" ><img  src="mm1.jpg" class="blur" / alt="css3毛玻璃效果白边问题_html/css_WEB-ITnose" >

 

需要注意目前火狐不支持,其他些浏览器,如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 */}<strong>2、解决白边方式</strong>相关HTML代码如下:
<img  src="mm1.jpg" / alt="css3毛玻璃效果白边问题_html/css_WEB-ITnose" >
<img  src="mm1.jpg" / alt="css3毛玻璃效果白边问题_html/css_WEB-ITnose" >原理很简单就是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出低下的那张图。。。白边就不见了,哈哈哈。。。你想到了吗?

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.