CSS 使用 CSS3 过滤器模糊定义边缘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12224320/
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
Defined Edges With CSS3 Filter Blur
提问by colmtuite
I am blurring some images with this code
我正在使用此代码模糊一些图像
img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
The edges of the image get blurred too though. Is it possible to blur the image, while keeping the edges defined? Like an inset blur or something?
不过，图像的边缘也会变得模糊。是否可以在保持边缘定义的同时模糊图像？像插入模糊之类的？
回答by ThinkingStiff
You could put it in a <div>with overflow: hidden;and set the <img>to margin: -5px -10px -10px -5px;.
您可以将其放入<div>withoverflow: hidden;并将其设置<img>为margin: -5px -10px -10px -5px;。
Demo:
演示：
Output
输出
CSS
CSS
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 {
overflow: hidden;
}
?
HTML
HTML
<div><img src="http://placekitten.com/300" />?????????????????????????????????????????????</div>????????????
回答by Jo?o Josézinho
I was able to make this work with the
我能够使这项工作与
transform: scale(1.03);
transform: scale(1.03);
Property applied on the image. For some reason, on Chrome, the other solutions provided wouldn't work if there was any relatively positioned parent element.
应用于图像的属性。出于某种原因，在 Chrome 上，如果有任何相对定位的父元素，则提供的其他解决方案将不起作用。
Check http://jsfiddle.net/ud5ya7jt/
检查http://jsfiddle.net/ud5ya7jt/
This way the image will be slightly zoomed in by 3% and the edges will be cropped which shouldn't be a problem on a blurred image anyway. It worked well in my case because I was using a high res image as a background. Good luck!
这样，图像将稍微放大 3%，边缘将被裁剪，这对于模糊的图像来说应该不是问题。它在我的情况下运行良好，因为我使用高分辨率图像作为背景。祝你好运！
回答by GeckoTang
I used -webkit-transform: translate3d(0, 0, 0);with overflow:hidden;.
我用-webkit-transform: translate3d(0, 0, 0);用overflow:hidden;。
DOM:
DOM：
<div class="parent">
<img class="child" src="http://placekitten.com/100" />
</div>
CSS:
CSS：
.parent {
width: 100px;
height: 100px;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.child {
-webkit-filter: blur(10px);
}
DEMO: http://jsfiddle.net/DA5L4/18/
演示：http: //jsfiddle.net/DA5L4/18/
This technic works on Chrome34 and iOS7.1
该技术适用于 Chrome34 和 iOS7.1
Update
更新
if you use latest version of Chrome, you don't need to use -webkit-transform: translate3d(0, 0, 0);hack. But it doesn't works on Safari(webkit).
如果您使用最新版本的 Chrome，则不需要使用-webkit-transform: translate3d(0, 0, 0);hack。但它不适用于 Safari（webkit）。
回答by GlabbichRulz
You can also keep the whole video, you do not have to cut something away.
You can overlay inset shadows over the white-blurred edges.
您还可以保留整个视频，不必剪掉一些东西。
您可以在白色模糊的边缘上叠加插入阴影。
This looks really nice as well :)
这看起来也很不错:)
Just paste this code to your videos' parent:
只需将此代码粘贴到您的视频的父级：
.parent {
-webkit-box-shadow: inset 0 0 200px #000000;
-moz-box-shadow: inset 0 0 200px #000000;
box-shadow: inset 0 0 200px #000000;
}
回答by rorymorris89
Having tackled this same problem myself today, I'd like to present a solution that (currently) works on the major browsers. Some of the other answers on this page did work once, but recent updates, whether it be browser or OS, have voided most/all of these answers.
今天我自己解决了同样的问题，我想提出一个（目前）适用于主要浏览器的解决方案。此页面上的其他一些答案确实有效，但最近的更新，无论是浏览器还是操作系统，都使大多数/所有这些答案无效。
The key is to place the image in a container, and to transform:scale that container out of it's overflow:hidden parent. Then, the blur gets applied to the img inside the container, instead of on the container itself.
关键是将图像放置在容器中，然后转换：将该容器从其溢出：隐藏的父级中扩展出来。然后，模糊应用于容器内的 img，而不是容器本身。
Working Fiddle: https://jsfiddle.net/x2c6txk2/
工作小提琴：https: //jsfiddle.net/x2c6txk2/
HTML
HTML
<div class="container">
<div class="img-holder">
<img src="https://unsplash.it/500/300/?random">
</div>
</div>
CSS
CSS
.container {
width : 90%;
height : 400px;
margin : 50px 5%;
overflow : hidden;
position : relative;
}
.img-holder {
position : absolute;
left : 0;
top : 0;
bottom : 0;
right : 0;
transform : scale(1.2, 1.2);
}
.img-holder img {
width : 100%;
height : 100%;
-webkit-filter : blur(15px);
-moz-filter : blur(15px);
filter : blur(15px);
}
回答by genedronek
In the many situations where the IMG can be made position:absolute, you can use clipto hide the blurred edges--and the outer DIV is unnecessary.
在许多可以将 IMG 设为position:absolute 的情况下，您可以使用clip来隐藏模糊的边缘——不需要外部 DIV。
img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
position: absolute;
clip: rect(5px,295px,295px;5px);
}
回答by cn123h
Just some hint to that accepted answer, if you are using position absolute, negative margins will not work, but you can still set the top, bottom, left and right to a negative value, and make the parent element overflow hidden.
只是对已接受答案的一些提示，如果您使用绝对位置，负边距将不起作用，但您仍然可以将顶部、底部、左侧和右侧设置为负值，并使父元素溢出隐藏。
The answer about adding clip to position absolute image has a problem if you don't know the image size.
如果您不知道图像大小，关于将剪辑添加到绝对图像位置的答案会出现问题。
回答by user2530491
Insert the image inside a with position: relative;and overflow: hidden;
将图像插入带有position: relative;和overflow: hidden;
HTML
HTML
<div><img src="#"></div>
CSS
CSS
div {
position: relative;
overflow: hidden;
}
img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
This also works on variable sizes elements, like dynamic div's.
这也适用于可变大小的元素，例如动态 div。
回答by Benny Neugebauer
You can stop the image from overlapping it's edges by clipping the image and applying a wrapper element which sets the blur effect to 0 pixels. This is how it looks like:
您可以通过剪切图像并应用将模糊效果设置为 0 像素的包装元素来阻止图像重叠其边缘。这是它的样子：
HTML
HTML
<div id="wrapper">
<div id="image"></div>
</div>
CSS
CSS
#wrapper {
width: 1024px;
height: 768px;
border: 1px solid black;
// 'blur(0px)' will prevent the wrapped image
// from overlapping the border
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
#wrapper #image {
width: 1024px;
height: 768px;
background-image: url("../images/cats.jpg");
background-size: cover;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
// Position 'absolute' is needed for clipping
position: absolute;
clip: rect(0px, 1024px, 768px, 0px);
}
回答by brendangibson
I found that, in my case, I did not have to add a wrapper.
我发现，就我而言，我不必添加包装器。
I just added -
我刚刚补充 -
margin: -1px;
or
或者
margin: 1px; // any non-zero margin
overflow: hidden;
My blurred element was absolutely positioned.
我的模糊元素是绝对定位的。
