如何在使用引导程序 4 时模糊前景中的图像边缘

Question

我正在尝试模糊图像的边缘，就像 https://stackoverflow.com/a/24953573 显示的图片一样。

我需要在前景图像(不是 css 中设置的图像)上执行此操作，因为 img url 是动态更改的。但框形阴影似乎对前景图像没有影响。 我也在使用 Bootstrap 4.3img-fluid类。

换句话说，上面引用的SO帖子中的代码有效，但是此图像上的边缘没有模糊(为简单起见，css内联)：

<img src="/images/mypic.jpg" 
class="img-fluid" 
style="box-shadow: 0 0 5px 5px white inset;">

.img-fluid设置max-width: 100%和height:auto。 我尝试用特定值覆盖这些值(我不想这样做来维护响应式图像)，但它也没有效果。

Answer 1

你需要用类名.img-blurdiv元素来包装img标签，所以使用伪元素:after可以在元素的内容之后插入一些内容。

.img-blur{
position: relative;
display: inline-block;
}
.img-blur:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 10px 10px #ffffff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row" >
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
</div>
</div>

Answer 2

带有inset的样式图像存在问题。

但是您有 2 种选择来执行此操作。您可以添加一个具有相对位置的容器，并在内部将带有类img-fluid的 img 和带有绝对位置的div 添加到此容器中。

第二种选择是设置一个容器，其中包含相对位置和 img，并使用伪类::after设置该容器的样式。

如果你这样做，它可以工作，但如果 img 小于容器，右框阴影就会出现问题。如果您将使用一些 JS 代码，则可以修复这些。

我用jQuery做了一个例子(因为你正在使用bootstrap，而bootstrap正在使用jquery)。

https://codesandbox.io/s/flamboyant-wing-z9lhm

Answer 3

不幸的是，CSS 'Inset' Box 阴影不适用于img标签。要解决此问题，您有几个选项，例如，可以将图像包装在div标签上，并使用伪元素在其上应用box-shadow。

这里的问题是，作为标准，div标签是一个"Block"元素，因此将覆盖整个父宽度。您可以使用display: inline-block或float: left属性来解决此问题。也许不是最好的"符合标准"，但可以处理这种情况。我在下面附上一个包含此概念的示例：

div {
position: relative;
display: inline-block;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 5px 5px white inset;
}

<div>
<img src="https://picsum.photos/200/300" class="img-fluid">
</div>