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

Question

我正在尝试模糊图像的边缘，例如中显示的图片。

我需要在前景图像（不是 css 中的一组图像）上执行此操作，因为 img url 是动态更改的。但是 box-shadow 似乎对前景图像没有影响。另外我正在使用 Bootstrap 4.3 img-fluid class.

换句话说，上面引用的 SO post 处的代码有效，但此图像的边缘没有模糊（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

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

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

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 2

inset 的样式图片有问题。

但是您有两种选择。您可以添加一个具有相对位置的容器，并在该容器中添加具有 class img-fluid 和 div 绝对位置的 img。

第二个选项是设置一个带有相对位置和内部 img 的容器，并使用伪 class ::after.

设置该容器的样式

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

我用 jQuery 做了一个例子（因为你使用的是 bootstrap 而 bootstrap 使用的是 jquery）。

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

Answer 3

您需要用 div 元素包装 img 标签，class 名称为 .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>

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

How to blur image edges in foreground when using Bootstrap 4

css

image

blur

bootstrap-4