图片后面怎么做效果？答案

【问题标题】：How to make effect behind the picture?图片后面怎么做效果？
【发布时间】：2021-04-02 01:57:09
【问题描述】：

图片后面怎么做效果？就像你在图片中看到的那样。当然，图像必须是响应式的。

【问题讨论】：

当然你不会分享你的尝试和失败的任何代码:) 所以是帮助，不是免费的编码服务，即使它充满了可爱的成员； .你可能误读了stackoverflow.com/help/how-to-ask

【解决方案1】：

单线解决方案：

img {
 padding:20px;
 background:linear-gradient(transparent 40px,red 0 calc(100% - 40px),transparent 0);
}

&lt;img src="https://picsum.photos/300/300"&gt;

【讨论】：

【解决方案2】：

您可以通过使用相对父级的绝对定位来重新创建这样的效果。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.imageWrapper {
  background: rebeccapurple;
  width: 200px;
  height: 200px;
  position: relative;
  margin: 16px;
}

.imageWrapper img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<div class="imageWrapper">
  <img src="https://unsplash.it/180/220" alt="">
</div>

忽略body 样式，它们只是为了在预览中更好地说明这一点。 .imageWrapper 和 .imageWrapper img 是你要注意的地方。

【讨论】：

【解决方案3】：

你能检查下面的代码吗？希望它对你有用。在这段代码中，我们给出了相对于img-block 的位置，并在它的pseudo-element 中给出了背景颜色和绝对位置。

.img-block {
  padding: 30px;
  position: relative;
  display: inline-block;
}

.img-block:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 75%;
  background: #F9CDF1;
  top: 50%;
  left: 0px;
  z-index: 1;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.img-block img {
  position: relative;
  z-index: 2;
}

<div class="img-block">
  <img src="https://via.placeholder.com/490x590.png" alt="image" />
</div>

【讨论】：