CSS 使用绝对 div 模糊并保留锐边

Question

如果 img 没有设置为绝对值，这可以正常工作：

div img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}
div {
    margin: 20px;
    overflow: hidden;
}

示例工作正常：http://jsfiddle.net/ThinkingStiff/b8fLU/（取自另一个问题）

但是，如果我想使用 background-image 对绝对 div 执行此操作呢？

<div id="background"></div>

#background {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    filter: blur(5px) brightness(0.75);
    -webkit-filter: blur(5px) brightness(0.75);
    -moz-filter: blur(5px) brightness(0.75);
    -ms-filter: blur(5px) brightness(0.75);
    -o-filter: blur(5px) brightness(0.75);
    position: absolute;
    background-image: url('images/bg.png');
    z-index: 1;
}

如何使用上述设置实现相同的效果（模糊但边缘锐利）？

Answer 1

将你的模糊元素放在这样的容器中：

<div class="container">
    <div id="background"></div>
</div>

那么不要使用 height:100% 和 width:100% 像这样使用：

.container{
    position:relative;
    width:300px;          /* this is an example */
    height:300px;         /* this is an example */
    overflow:hidden;
}

#background {
    left:-15px;
    right:-15px;
    top:-15px;
    bottom:-15px;
    /* other styles */
}

您需要从元素的每一侧删除15px（或更多/更少）。

DEMO - Full DEMO

Answer 2

我认为非常聪明的另一种答案是使用 svg 来模糊 img。在这个 codepen https://codepen.io/johndjameson/full/xVjgPy/ 中描述得非常好，所以我将把它复制并粘贴到这里。希望在此线程上更易于访问。

总结一下。你像这样制作一个不可见的 svg 元素

 <svg class='hideSvgSoThatItSupportsFirefox'>
  <filter id='sharpBlur'>
    <feGaussianBlur stdDeviation='3'></feGaussianBlur>
    <feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0'></feColorMatrix>
    <feComposite in2='SourceGraphic' operator='in'></feComposite>
  </filter>
</svg>

然后通过链接到不可见的svg元素使用CSS进行模糊

.svgBlur { filter: url("#sharpBlur"); }

最后你只需将svgBlur 添加到你想要模糊的img

<img class='svgBlur' src='https://unsplash.it/360/240?image=511'>

就是这样！对我来说效果很好。

.cssBlur {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.svgBlur {
  -webkit-filter: url("#sharpBlur");
  filter: url("#sharpBlur");
}

.hideSvgSoThatItSupportsFirefox {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

*,
 ::before,
 ::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  padding: 40px;
  line-height: 1.4;
  margin-left: auto;
  margin-right: auto;
  max-width: 840px;
}

svg {
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
pre {
  margin-top: 0;
  margin-bottom: 0;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  margin-bottom: 40px;
}

h2 {
  margin-bottom: 20px;
}

p {
  margin-bottom: 20px;
}

pre {
  margin-bottom: 20px;
  overflow: auto;
}

.emoji {
  font-size: 40px;
  line-height: 1;
}

.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -40px;
}

.grid-box {
  padding-left: 40px;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .grid-box--1of2 {
    width: 50%;
  }
}

.mbf {
  margin-bottom: 0;
}

.mbm {
  margin-bottom: 40px;
}

.mbs {
  margin-bottom: 20px;
}

@media screen and (min-width: 600px) {
  .mbf_m {
    margin-bottom: 0;
  }
  .mbm_m {
    margin-bottom: 40px;
  }
}

<svg class='hideSvgSoThatItSupportsFirefox'>
  <filter id='sharpBlur'>
    <feGaussianBlur stdDeviation='3'></feGaussianBlur>
    <feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0'></feColorMatrix>
    <feComposite in2='SourceGraphic' operator='in'></feComposite>
  </filter>
</svg>
<h1>Blurred Image with Sharp Edges</h1>
<div class='grid mbm_m'>
  <div class='grid-box grid-box--1of2 mbs mbf_m'>
    <img class='mbf' src='https://unsplash.it/360/240?image=511'>
  </div>
  <div class='grid-box grid-box--1of2 mbm mbf_m'>
    <h2>Original image</h2>
    <p>
      Let’s blur this image in the browser. There are two types of filters we can use: CSS and SVG.
    </p>
    <p>If you want to keep the orginal’s sharp edges, you’re going to need SVG.</p>
    <p class='emoji mbf'>?</p>
  </div>
</div>
<div class='grid mbm'>
  <div class='grid-box grid-box--1of2 mbm mbf_m'>
    <img class='cssBlur mbs' src='https://unsplash.it/360/240?image=511'>
    <h2>Blurred with CSS</h2>
    <pre>filter: blur(3px)</pre>
    <p class='mbf'>
      The syntax in CSS is super simple, but this’ll fuzz up the edges around the image.
    </p>
  </div>
  <div class='grid-box grid-box--1of2'>
    <img class='svgBlur mbs' src='https://unsplash.it/360/240?image=511'>
    <h2>Blurred with SVG</h2>
    <pre>filter: blur('#sharpBlur')</pre>
    <p class='mbf'>
      Here you reference a filter’s <code>id</code> from the SVG. See the difference? This one looks so clean!
    </p>
  </div>
</div>

Answer 3

我注意到在移动设备上模糊有时会覆盖overflow:hidden。这可以通过向容器添加border: 1px solid transparent; 来解决。