使用CSS模糊图像的一部分 [英] Blur part of an image with CSS

问题描述

我有一个图片的问题。我试图模糊图像的一部分，但我的解决方案不工作。
请查看此代码：

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; 
} 
  

它看起来像这样： http://img.pl/THng.png 。它超越了形象。我想创建如下的锐利轮廓： http://img.pl/VHng.png 。 / p>

有可能在CSS中？

解决方案

外部 div 至隐藏和<$ c>的溢出属性$ c> margin-right 到 -1 ，它的工作方式类似一个魅力。

  #image {
 ... 
 overflow：hidden; 
} 
 
 #image .blur {
 ... 
 margin-right：-1px; 
} 
  

这里是 JSFiddle 。

I have a problem with an image. I tried to blur a part of an image, but my solution deosn't work. Please, take a look at this code:

HTML file

<div id="image">
    <div class="blur"></div>
</div>

CSS file

#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;
}

It will look like this: http://img.pl/THng.png . It goes beyond the image. I would like to create sharp outline like this: http://img.pl/VHng.png .

It's possible in CSS?

解决方案

I have set the overflow property of the outer div to hidden and the margin-right of the inner one to -1 and it worked like a charm.

#image {
    ...
    overflow: hidden;
}

#image .blur {
    ...
    margin-right: -1px;
}

Here is the working example in JSFiddle.

这篇关于使用CSS模糊图像的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！