Html CSS 模糊并使用绝对 div 保留锐利的边缘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20443283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS blur and retain sharp edges using absolute div
提问by jskidd3
This works just fine if img is not set to absolute:
如果 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;
}
Example working fine: http://jsfiddle.net/ThinkingStiff/b8fLU/(taken from another question)
示例工作正常：http: //jsfiddle.net/ThinkingStiff/b8fLU/（取自另一个问题）
But what if I want to do this with an absolute div using background-image?
但是，如果我想使用 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;
}
How can I achieve the same effect (blur but with sharp edges) using the setup above?
如何使用上面的设置实现相同的效果（模糊但边缘清晰）？
回答by Mohsen Safari
put your blur element in a container like this:
将您的模糊元素放在这样的容器中：
<div class="container">
<div id="background"></div>
</div>
then instead of using height:100%and width:100%use like this:
然后而不是像这样使用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 */
}
you need to remove 15px(or more/less) from each side of your element.
您需要15px从元素的每一侧删除（或更多/更少）。
回答by nmu
An alternative to the answers I've been seeing for this, that I think is really clever, is using an svg to blur the img. It's described really well in this codepen https://codepen.io/johndjameson/full/xVjgPy/so I'll just copy and paste that over here. Hopefully it'll be much more accessible on this thread.
我一直在为此看到的答案的另一种选择，我认为非常聪明，是使用 svg 来模糊img. 它在这个 codepen https://codepen.io/johndjameson/full/xVjgPy/ 中描述得非常好，所以我将复制并粘贴到这里。希望它在这个线程上更容易访问。
To sum it up. You make an invisible svg element like this
把它们加起来。你像这样制作了一个不可见的 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>
And then use CSS to blur by linking to the invisible svg element
然后通过链接到不可见的 svg 元素使用 CSS 进行模糊处理
.svgBlur { filter: url("#sharpBlur"); }
Finally you just add svgBlurto the imgyou want blurred
最后你只需添加svgBlur到img你想要模糊
<img class='svgBlur' src='https://unsplash.it/360/240?image=511'>
And that's it! Worked really well for me.
就是这样！对我来说真的很好。
.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>回答by Fredrik
I've noticed on mobile devices the blur sometimes will override the overflow:hidden. This can be fixed by adding a border: 1px solid transparent;to the container.
我注意到在移动设备上，模糊有时会覆盖overflow:hidden. 这可以通过向border: 1px solid transparent;容器添加 a来解决。
