在背景图像顶部垂直堆叠 css 渐变（不叠加）答案

【问题标题】：Vertically stacking a css gradient on top of a background image (not overlaid)在背景图像顶部垂直堆叠 css 渐变（不叠加）
【发布时间】：2015-12-14 20:20:10
【问题描述】：

我有一张背景图片，其中第一行像素是纯色（这是一张风景照片）。我们的想法是将它放在页面底部，然后在其上方添加一个 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 方法来做到这一点。

【问题讨论】：

问题在于您将未知比例的 (containing) 图像放入宽度未知的容器中，因此您无法预测其高度，否则您可以将背景渐变设置为background-size?
我猜是这样，这适用于body，所以未知宽度是浏览器窗口。如果我将图像固定为特定高度，我认为这将是微不足道的。图像是横向的，所以我想拉伸整个页面宽度而不是扭曲，如果我限制高度就会发生这种情况。
如果您知道图像的纵横比，则可以使用 vw 单位（视口宽度）来实现。我会测试一下。

标签： css background-image gradient

【解决方案1】：

假设您的图片的纵横比为 4:1（即高度是宽度的 25%），您可以这样做：

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;
}

渐变中的 vw 单位表示视口宽度的百分比。因此，如果背景图像将拉伸视口的整个宽度，并且它的高度是其宽度的 25%，那么它的高度将等于 25vw，您可以从底部开始渐变 25vw，并在页面顶部结束.

http://jsfiddle.net/8a5L20h4/

【讨论】：