Question

我只是想在内嵌图片标记中添加模糊边角并且无法正常工作。

我希望内嵌图片标记为我们设置background图片标记，如下所示，这将如何完成？

＆＃13;

.test {
  background: url(http://via.placeholder.com/350x150) left top no-repeat;
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
  width: 350px;
  height: 150px;
}

img {
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
  width: 350px;
  height: 150px;
}

＆＃13;

<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">

<div class="test"></div>

＆＃13;

Answer 1

您可以使用技巧，创建容器并在图像上放置一层可以伪造模糊效果的图层。

根据此LINK，我刚使用了div的{{1}}个内容。

工作版

.test {
  background: url(http://via.placeholder.com/350x150) left top no-repeat;
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
  width: 350px;
  height: 150px;
}

.image-container {
  position: relative;
  float: left;
}
.image-container::before {
  position: absolute;
  content: '';
  top: 0; bottom: 0; left: 0; right: 0;
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
}
.image-container img {
  float: left;
}

带有模糊角落的html图像标记

1 个答案: