Html 使用 CSS 模糊图像或背景图像的边缘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24709915/
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
Blur the edges of an image or background image with CSS
提问by Startec
I know there are a bunch of new CSS filters and I am wondering if there is a way to apply those to an image or background image. Everything I have read talks about softening the image with a drop shadow, however, a drop shadow is a color, and I want to blur the edges of images so that I could blend them together more seamlessly if they were next to each other. Right now it looks like you can only go with a drop shadow or apply a blur to the entire image (based on what I have read).
我知道有很多新的 CSS 过滤器，我想知道是否有办法将它们应用于图像或背景图像。我读过的所有内容都在谈论使用阴影柔化图像，但是，阴影是一种颜色，我想模糊图像的边缘，以便在它们彼此相邻时可以更无缝地将它们混合在一起。现在看起来您只能使用投影或对整个图像应用模糊（根据我所阅读的内容）。
The closest I can come up with is a semi-transparent box shadow....like this
我能想到的最接近的是一个半透明的盒子阴影......像这样
-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
回答by Leonardo
If what you're looking for is simply to blur the image edges you can simply use the box-shadow with an inset.
如果您正在寻找的只是模糊图像边缘，您可以简单地使用带有插图的框阴影。
Working example: http://jsfiddle.net/d9Q5H/1/
工作示例：http: //jsfiddle.net/d9Q5H/1/
HTML:
HTML：
<div class="image-blurred-edge"></div>
CSS
CSS
.image-blurred-edge {
background-image: url('http://lorempixel.com/200/200/city/9');
width: 200px;
height: 200px;
/* you need to match the shadow color to your background or image border for the desired effect*/
box-shadow: 0 0 8px 8px white inset;
}
回答by Leonardo
I'm not entirely sure what visual end result you're after, but here's an easy way to blur an image's edge: place a div with the image inside another div with the blurred image.
我不完全确定你想要什么样的视觉最终结果，但这里有一个简单的方法来模糊图像的边缘：将一个带有图像的 div 放在另一个带有模糊图像的 div 中。
Working example here:http://jsfiddle.net/ZY5hn/1/
这里的工作示例：http : //jsfiddle.net/ZY5hn/1/
HTML:
HTML：
<div class="placeholder">
<!-- blurred background image for blurred edge -->
<div class="bg-image-blur"></div>
<!-- same image, no blur -->
<div class="bg-image"></div>
<!-- content -->
<div class="content">Blurred Image Edges</div>
</div>
CSS:
CSS：
.placeholder {
margin-right: auto;
margin-left:auto;
margin-top: 20px;
width: 200px;
height: 200px;
position: relative;
/* this is the only relevant part for the example */
}
/* both DIVs have the same image */
.bg-image-blur, .bg-image {
background-image: url('http://lorempixel.com/200/200/city/9');
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */
.bg-image-blur {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
}
/* I added this DIV in case you need to place content inside */
.content {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
color: #fff;
text-shadow: 0 0 3px #000;
text-align: center;
font-size: 30px;
}
Notice the blurred effect is using the image, so it changes with the image color.
请注意模糊效果是使用图像，因此它会随着图像颜色而变化。
I hope this helps.
我希望这有帮助。
回答by Sunny
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#grad1 {
height: 400px;
width: 600px;
background-image: url(t1.jpg);/* Select Image Hare */
}
#gradup {
height: 100%;
width: 100%;
background: radial-gradient(transparent 20%, white 70%); /* Set radial-gradient to faded edges */
}
</style>
</head>
<body>
<h1>Fade Image Edge With Radial Gradient</h1>
<div id="grad1"><div id="gradup"></div></div>
</body>
</html>
