图片背后的效果如何制作？

Question

如何制作图片背后的效果？就像你在图片中看到的那样。当然，图像必须具有响应性。

Answer 1

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

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是你要注意的地方。

Answer 2

你能检查一下下面的代码吗？希望它对你有用。在这段代码中，我们给出了相对于 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>

Answer 3

一行解决方案：

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

<img src="https://picsum.photos/300/300">

图片背后的效果如何制作？

How to make effect behind the picture?

html

css

image

responsive