[使用Bootstrap 4时如何模糊前景中的图像边缘

Question

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

我需要在前景图像上执行此操作（而不是在CSS中设置一个，因为img url是动态更改的。但是盒子阴影似乎对前景图像没有影响。我也在使用Bootstrap 4.3 img-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

inset的样式图像存在问题。

但是您有2种替代方法。您可以向此容器添加一个位置相对的容器，并在内部放置带有类img-fluid的put img和具有正位置绝对值的div。

第二个选项是设置一个容器，在其内部具有相对位置和img，并使用伪类::after对该容器进行样式设置。

如果您可以这样做，则可以，但是如果img小于容器，则正确的框阴影会出现问题。如果您将使用一些JS代码，则可以修复这些问题。

我用jQuery作了一个示例（因为您正在使用引导程序，而引导程序正在使用jquery）。

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

Answer 2

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

这里的问题是，作为标准，div标签是一个“块”元素，因此将覆盖整个父宽度。您可以应用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>

Answer 3

您需要用类名img的div元素包装.img-blur标记，因此可以使用: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>