html - 在背景图像的底部创建静态淡入淡出

Question

我为正文设置了一个属性，为其设置了固定宽度和高度的背景，但具有一定数量像素的垂直偏移。但是，对于较大的屏幕，背景图像可能会结束，导致其下方出现白色背景。

是否可以在图像的底部创建一个白色静态淡入淡出效果，这样任何屏幕分辨率的人都不会注意到图像的结尾？

我试过

-moz-linear-gradient(to bottom,
        rgba(255,255,255,0) 80%,
        rgba(255,255,255,1) 100%
      ), 

但是，由于偏移量可以动态变化，我发现要保持渐变和背景对齐有些困难。

你能建议我一个更快的方法来实现这个结果吗？ (或者可能是绕过后台问题的另一种技术)

多谢指教

Answer 1

尝试这样的事情:https://codepen.io/lauraeddy/pen/aLYLGX

HTML:

<div class="image">
    <img src="/your-image"/>
    <div class="fade"></div>
</div>

CSS:

.image {
    position: relative;
}
.image img {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
}
.image .fade {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    z-index: 2;
    background: rgba(255, 255, 255, 0)
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 80%
        )
        repeat scroll 0 0;
}

这样，您就将 fade 元素与 .image div 的底部对齐，它应该是图像元素的高度。

您可能需要将 .image .fade div 的高度更改为看起来最好的。