彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > css3毛玻璃效果白边问题

css3毛玻璃效果白边问题

发布时间:2019-09-02 02:14编辑:新闻动态浏览(71)

    css3毛玻璃效果白边问题,css3毛玻璃白边

    图片 1

    注: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"     
         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" />
    
    原理很简单就是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出低下的那张图。。。白边就不见了,哈哈哈。。。你想到了吗?
    

    图片 2

    css样式兼容各种浏览器的 毛玻璃效果解

    -webkit就是针对,webkit核心浏览器的,典型CHROME,Safari
    -moz是Mozilla核心,典型,火狐
    -o-, -xv-,典型OPERA
    -ms,一看就知道是微软了,一般省略

    你加上其它厂商的标头试试,有部分不支持这属性,  

    注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧!

    用CSS怎给字体加白边

    用text-shadow此属性用来设计字体的投影效果,不过IE不支持,不过CSS3.0就可以支持,以后也就可以显示了。text-shadow:的设置是这样:text-shadow:1PX 1PX 1PX #FFFFFF。。第一个数值是X轴方向,第二个数值是Y轴方向,第三数值是投影后的模糊度越大越模糊,第四个是投影后的颜色色值。  

    注: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" />
    

    本文由彩世界平台发布于新闻动态,转载请注明出处:css3毛玻璃效果白边问题

    关键词: