如何解决如何使用css从下到上渐变图像?
图像在光滑的滑块中运行。我已经尝试过辐射渐变,但没有任何有用的结果。
解决方法
它不是模糊,它是从黑色到透明的线性渐变。您可以使用一些元素或伪元素 (after
/before
) 将其放置在图像上并为其赋予线性渐变。
像这样:
.my-cool-item {
position: relative;
display: inline-block;
}
.my-cool-item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 300px;
background: linear-gradient(180deg,rgba(0,0),black);
}
<div class="my-cool-item">
<img src="https://i.stack.imgur.com/IuWLZ.jpg"/>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。