Html 如何在图片背后产生效果？

如何在图片背后产生效果？就像你在照片上看到的那样。当然，图像必须是响应的

---

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

正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}
.imageWrapper{
背景：丽贝卡紫；
宽度：200px；
高度：200px；
位置：相对位置；
利润率：16px；
}
.img{
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
}

---

您能检查一下下面的代码吗？希望它对你有用。在这段代码中，我们给出了相对于

img块的位置，并在其
伪元素中给出了带有绝对位置的背景色


.img块{
填充：30px；
位置：相对位置；
显示：内联块；
}
.img块：之前{
内容：“；
显示：块；
位置：绝对位置；
宽度：100%；
身高：75%；
背景#F9CDF1；
最高：50%；
左：0px；
z指数：1；
转化：translateY（-50%）；
-webkit转换：translateY（-50%）；
}
.img模块img{
位置：相对位置；
z指数：2；
}

单线解决方案：


img{
填充：20px；
背景：线性梯度（透明40px，红色0钙（100%-40px），透明0）；
}
当然，您不会分享任何关于您的尝试和失败的代码：）这是为了帮助您，而不是免费的编码服务，即使它有很多可爱的成员。你可能误读了《工作很好》，谢谢你。：-）