【blur】滤镜模糊图片模糊效果【没有毛边】

解决方案：

.blurcover{ position: absolute; width: 100%; height: 100%;  opacity: 0.3;}
.blur {    
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(1px); /* Chrome, Opera */
       -moz-filter: blur(1px);
        -ms-filter: blur(1px);    
            filter: blur(5px); /*程度*/
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false); /* IE6~IE9 */
}


<li>
    <div class="blurcover"> <img src="uploads/dr_pro_2.jpg" alt="" class="blur" /></div>
    <img src="uploads/dr_pro_2.jpg" alt=""/>                
</li>

一张图片调用两次，一次作为底图防止毛边，另一张图片覆盖在上面，进行滤镜。

-----------------------------------------------------------------------------------------------

http://www.zhangxinxu.com/study/201502/image-baidu-homepage-local-blur.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="description" content="兼容性的局部模糊毛玻璃效果效果-百度图片首页示意 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端学习实例页面之兼容性的局部模糊毛玻璃效果效果-百度图片首页示意" />
<meta name="keywords" content="css, jQuery, javascript" />
<meta name="author" content="张鑫旭, zhangxinxu" />
<title>兼容性的局部模糊毛玻璃效果效果-百度图片首页示意</title>
<style>
/* for IE7+ */
html {
    overflow: hidden;
}
body {
    margin: 0;
    font-family: 'microsoft yahei';
    background-color: #9C5C1E;
}

html, body {
    height: 100%;
}

.hidden {
    display: none;
}

.back {
    position: absolute; right: 15px; top: 15px;
    padding: 1px 5px;
    background-color: #000;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    opacity: .8; filter: alpha(opacity=80);
}

.background {
    position: fixed; _position: absolute; width: 100%; top: 0; left: 0;
}

.container {
    width: 860px; height: 310px;
    position: absolute; left: 50%; top: 50%;
    margin: -155px 0 0 -430px;
    /* IE9+ */
    background-color: rgba(255,255,255,.1);
    /* IE6-IE8 */
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#17FFFFFF,endColorStr=#17FFFFFF);
}
:root .container {
    filter: none;
}
.inner {
    padding: 10px 0 0 10px;
    overflow: hidden; _zoom: 1;
}

.list {
    width: 160px; height: 140px;
    float: left;
    margin: 0 10px 10px 0;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.layer {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
}
.cover {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 30px; line-height: 30px;
    overflow: hidden;
}
.blur {
    position: absolute;
    width: 100%; bottom: 0; left: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* blur */
    filter: url(blur-5px.svg#blur);
    /* css3 */
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px); /* FireFox 35+ support */
    /* IE6~IE9 */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
    *left: -5px; left: -5px\0;
}
:root .blur {
    left: -5px \0; /* Just IE9 */
}
.mask {
    position: absolute; left: 0; bottom: 0; width: 100%;
    /* IE9+ */
    background-color: rgba(0,0,0,.2);
    /* IE6-IE8 */
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#34000000,endColorStr=#34000000);
    color: #fff;
    font-size: 14px;
    text-indent: 10px;
}
:root .mask {
    filter: none;
}

/* affect */
.list img, .list svg {
    -webkit-transition: all .25s; transition: all .25s;
    vertical-align: bottom;
}
.list:hover .layer,
.list:hover .blur {
    -webkit-transform: scale(1.05) translateZ(0);
    -ms-transform: scale(1.05);
    transform: scale(1.05) translateZ(0);
    /* IE6-IE8 */
    zoom: 1.05;
}
:root .list:hover .layer,
:root .list:hover .blur {
    zoom: 1;
}

</style>
</head>

<body>
<svg class="hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="5" />
        </filter>
    </defs>
</svg>

<img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/xique1.jpg" class="background">

<a href="http://www.zhangxinxu.com/wordpress/?p=4571" class="back">回到相关文章 &raquo;</a>

<div class="container">
    <div class="inner">
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheying204b.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheying204b.jpg" class="blur">
                <div class="mask">摄影</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/lvyou204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/lvyou204.jpg" class="blur">
                <div class="mask">旅游</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/mingixng204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/mingixng204.jpg" class="blur">
                <div class="mask">明星</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheji204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/sheji204.jpg" class="blur">
                <div class="mask">设计</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/chongwu204.jpg" class="blur">
                <div class="mask">宠物</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/shishang204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/shishang204.jpg" class="blur">
                <div class="mask">时尚</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/bizhi204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/bizhi204.jpg" class="blur">
                <div class="mask">壁纸</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/dongman204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/dongman204.jpg" class="blur">
                <div class="mask">动漫</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/jiaju204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/jiaju204.jpg" class="blur">
                <div class="mask">家居</div>
            </div>
        </div>
        <div class="list">
            <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/qiche204.jpg" class="layer">
            <div class="cover">
                <img src="http://img0.bdstatic.com/img/image/shouye/xinshouye/qiche204.jpg" class="blur">
                <div class="mask">汽车</div>
            </div>
        </div>
    </div>
</div>

<script>
//IE10+ blur            
if (typeof document.msHidden != "undefined") {
    [].slice.call(document.querySelectorAll(".cover img")).forEach(function(img) {
        img.classList.add("hidden");
        
        var myImage = new Image(), src = img.src;
        img.insertAdjacentHTML("afterend", '<svg class="blur" width="160" height="140">\
            <image xlink:href="'+ src +'" src="'+ src +'" width="160" height="140" y="0" x="0" filter="url(#blur)" />\
        </svg>');
    });
}
</script>
</body>
</html>

posted @ 2015-04-20 18:02 Shimily 阅读(363) 评论(0) 收藏举报

刷新页面返回顶部

Shimily

学而不思则罔，思而不学则殆

【blur】滤镜模糊 图片模糊效果【 没有毛边】

【blur】滤镜模糊图片模糊效果【没有毛边】