如何解决图片后面的效果怎么做?
图片背后的效果如何?就像你在图片中看到的那样。当然,图片必须是响应式的。
解决方法
单行解决方案:
img {
padding:20px;
background:linear-gradient(transparent 40px,red 0 calc(100% - 40px),transparent 0);
}
<img src="https://picsum.photos/300/300">
您可以通过使用相对父级的绝对定位来重新创建这样的效果。
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
是您要注意的事项。
你能看看下面的代码吗?希望它对你有用。在这段代码中,我们给出了相对于 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。