使用CSS模糊图像或背景图像的边缘

e5njpo68 于 2023-05-08 发布在其他

关注(0)|答案(5)|浏览(179)

我知道有一堆新的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);

css

来源：https://stackoverflow.com/questions/24709915/blur-the-edges-of-an-image-or-background-image-with-css

5条答案

按热度按时间

uplii1fm1#

如果你只是想模糊图像的边缘，你可以简单地使用带插图的盒状阴影。
工作示例：http://jsfiddle.net/d9Q5H/1/

代码片段：

.image-blurred-edge {
  background-image: url('https://picsum.photos/200/300');
  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 class="image-blurred-edge"></div>

赞(0）回复(0）举报 2023-05-08

u5i3ibmn2#

我不完全确定你想要什么样的视觉效果，但这里有一个简单的方法来模糊图像的边缘：将一个包含图像的div放在另一个包含模糊图像的div中。

此处的工作示例：http://jsfiddle.net/ZY5hn/1/

代码片段：

.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('https://picsum.photos/200/300');
  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;
}

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>

请注意，模糊效果使用的是图像，因此它会随图像颜色而变化。
希望这能帮上忙。

赞(0）回复(0）举报 2023-05-08

nxowjjhe3#

如果您在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 -10px -10px 10px 20px white;
}

<div class="container">
    <img src="https://picsum.photos/200/200">
    <!-- http://lorempixel.com/200/200/city -->
    <div class="block"></div>
</div>

赞(0）回复(0）举报 2023-05-08

xjreopfe4#

<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>

赞(0）回复(0）举报 2023-05-08

izj3ouym5#

这是我找到的关于模糊实际img html元素边缘的最佳教程：