在背景图像顶部垂直堆叠css渐变（不覆盖）

我有一个背景图像，其中第一行像素是纯色（它是风景的照片）。这个想法应该是在页面的底部，然后在它上面的一个CSS渐变，它将从页面的顶部延伸，停在图像的高度。有很多教程展示了如何叠加/叠加渐变，但他们都假设你想要一个完整的页面渐变或者将渐变叠加在背景图像的顶部。在背景图像顶部垂直堆叠css渐变（不覆盖）

我现在拥有的是：

background: rgba(30, 53, 192, 1); 

background: url("myimage.jpg") no-repeat center bottom, -moz-linear-gradient(top, #000 0%, #1E35C0 100%); 
background: url("myimage.jpg") no-repeat center bottom, -webkit-gradient(linear, 0% 0%,0% 100%, from(#000), to(#1E35C0)); 
background: url("myimage.jpg") no-repeat center bottom, -webkit-linear-gradient(top, #000 0%,#1E35C0 100%); 
background: url("myimage.jpg") no-repeat center bottom, -o-linear-gradient(top, #000 0%,#1E35C0 100%); 
background: url("myimage.jpg") no-repeat center bottom, -ms-linear-gradient(top, #000 0%,#1E35C0 100%); 
background: url("myimage.jpg") no-repeat center bottom, linear-gradient(top, #000 0%, #1E35C0 100%); 

background-size: contain;

这有几乎预期的效果。 CSS渐变效果很好，并且图像处于正确的位置，但我不知道如何使图像上方的渐变停留更合适，响应更快。我可以使用百分比，但是再一次，只有当我知道图像的高度时才有效。

我知道这可能是相当容易在JavaScript中，但我希望有一个干净的CSS方式来做到这一点。

来源

2015-12-14 Josh

是你正在放置未知的比例（'contain'ing）图像到未知宽度的容器中，所以不能预测其高度在事实问题，你可以以其它方式设置为背景梯度作为'背景size'？ – myf

我想是这样，这适用于'身体'，所以未知的宽度是浏览器窗口。如果我将图像固定为特定高度，我认为这将是微不足道的。图像是一个风景，所以我想要展开整个页面的宽度，而不是扭曲，如果我限制了高度，会发生这种情况。 – Josh

如果您知道图像的宽高比，则可以使用vw单位（视口宽度）进行设置。我会测试一下。 – andi

假设你的图像具有4的纵横比：在那里

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #ccc; 
 
    background-image: url("http://ima.gs/transparent/000/000/200%C3%9750-200x50.png") 
 
        , linear-gradient(to top, transparent 25vw, #fff 25vw, #00f 100%); 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-size: contain; 
 
}

大众单元：1（即高度为宽度的25％），则可以做到这一点渐变意味着视口宽度的百分比。因此，如果背景图片将拉伸视口的整个宽度，并且其高度为其宽度的25％，那么其高度将等于25vw，并且您可以从底部开始25vw的渐变，并在页面顶部结束。

http://jsfiddle.net/8a5L20h4/

来源

2015-12-14 21:14:35 andi

完美地工作，谢谢！ – Josh

在背景图像顶部垂直堆叠css渐变（不覆盖）

回答

相关问题