使用 CSS 模糊图像或背景图像的边缘
Posted
技术标签:
【中文标题】使用 CSS 模糊图像或背景图像的边缘【英文标题】：Blur the edges of an image or background image with CSS 【发布时间】：2014-09-02 19:09:34 【问题描述】：我知道有很多新的 CSS 过滤器，我想知道是否有办法将它们应用于图像或背景图像。我读过的所有内容都在谈论使用投影来柔化图像，但是，投影是一种颜色，我想模糊图像的边缘，这样如果它们彼此相邻，我就可以更无缝地将它们融合在一起。现在看起来你只能使用投影或对整个图像应用模糊（基于我所读到的内容）。
我能想到的最接近的是一个半透明的盒子阴影......像这样
-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);
【问题讨论】：
给出一个你想要的链接。并为您的图像开发小提琴。我们可以帮助您实现您的要求。 【参考方案1】：如果您要寻找的只是模糊图像边缘，您可以简单地使用带有插图的 box-shadow。
工作示例： http://jsfiddle.net/d9Q5H/1/
HTML：
<div class="image-blurred-edge"></div>
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;
【讨论】：
这行得通，如果你想要一个动态的宽度/高度，你也可以在 div 中添加 style="visibility;hidden;" 的图像 使用 CSS 可以创建一个圆圈。只需使用“边界半径：50%”。上述创建图像软边缘的方法似乎不适用于“圆形”图像。 谢谢@Robin Manoli，我的头痛终于结束了——希望我能更多地支持你的评论【参考方案2】：我不完全确定您所追求的视觉最终结果，但这里有一个简单的方法来模糊图像的边缘：将一个带有图像的 div 放在另一个带有模糊图像的 div 中。
此处的工作示例： http://jsfiddle.net/ZY5hn/1/
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：
.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;
注意模糊效果是在使用图像，所以它会随着图像颜色的变化而变化。
我希望这会有所帮助。
【讨论】：
这很棒。我真的在寻求一个解决方案来消除图像的“硬”边缘（这样我就可以将两个图像相互对接并进行平滑过渡），但我认为这是一个好的开始。 哦，那就更简单了。我已经添加了另一个关于如何实现这种效果的答案。如果您需要放置两个图像并在它们之间进行过渡，只需选择过渡颜色并使用我在第二个答案中解释的 box-shadow 即可。【参考方案3】：如果将图像设置在 div 中，则还必须同时设置高度和宽度。这可能会导致图像失去比例。此外，您必须在 CSS 而不是 HTML 中设置图像 URL。
相反，您可以使用 IMG 标签设置图像。在容器类中，您只能设置百分比或像素的宽度，高度将自动保持比例。
这对于搜索引擎和阅读引擎使用IMG标签定义图像的可访问性也更有效。
.container
margin: auto;
width: 200px;
position: relative;
img
width: 100%;
.block
width: 100%;
position: absolute;
bottom: 0px;
top: 0px;
box-shadow: inset 0px 0px 10px 20px white;
<div class="container">
<img src="http://lorempixel.com/200/200/city">
<div class="block"></div>
</div>【讨论】：
【参考方案4】：<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>
【讨论】：
以上是关于使用 CSS 模糊图像或背景图像的边缘的主要内容，如果未能解决你的问题，请参考以下文章