我的图像有问题。我试图模糊图像的一部分，但是我的解决方案无效。请看下面的代码：
HTML文件
<div id="image">
<div class="blur"></div>
</div>
CSS文件
#image {
width: 940px;
height: 360px;
background-image: url('../img/photo.png');
}
#image .blur {
background-image: url('../img/photo.png');
background-position: center right;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: blur(3px);
float: right;
height: 100%;
width: 360px;
}
CSS有可能吗？
我已经设定overflow外的财产div来hidden和margin-right内一个来-1和它的工作就像一个魅力。
#image {
...
overflow: hidden;
}
#image .blur {
...
margin-right: -1px;
}
这是JSFiddle中的工作示例。
#image {
width: 940px;
height: 360px;
overflow: hidden;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png');
}
#image .blur {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png');
background-position: center right;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: blur(3px);
float: right;
height: 100%;
width: 360px;
margin-right: -1px;
}<div id="image">
<div class="blur"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句