css - 如何使用css从下到上渐变图像？

Question

我正在寻找一种从下到上渐变图像的方法

初始与 目标

图像在光滑的滑块中运行。我已经尝试过辐射渐变，但没有任何有用的结果。

标签： cssshadowblurlinear-gradientsradial-gradients

Answer 1

它不是模糊的，它是从黑色到透明的线性渐变。您可以使用一些元素或伪元素 ( 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,0,0), black);
}

<div class="my-cool-item">
  <img src="https://i.stack.imgur.com/IuWLZ.jpg"/>
</div>