在背景图像的底部创建一个静态淡入淡出

问题描述：

我已经为主体设置了一个属性，为它设置了固定宽度和高度的背景，但是具有一定数量的像素的垂直偏移量。但是，对于较大的屏幕，背景图像可能会结束，从而导致背景下出现白色背景。在背景图像的底部创建一个静态淡入淡出

是否有可能在图像的底部创建白色静态渐变效果，以便任何具有任何屏幕分辨率的主体都不会注意到图像的结尾？

我tryed与

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

然而，由于偏移可以动态改变，我发现了一些困难，保持梯度和比对的背景。

你能否建议我以更快的方式来达到这个结果？（或者可能是另一种技术，以绕过背景端问题）的建议

答

感谢尝试是这样的：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; }

这样，您将“淡入淡出”元素对齐到底部om'.image'div应该是图像元素的高度。

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

在背景图像的底部创建一个静态淡入淡出

相关推荐