在背景图像上垂直堆叠 css 渐变（未叠加）

Question

我有一张背景图片，其中第一行像素是纯色（这是一张风景照片）。这个想法是将它放在页面底部，然后在它上面有一个 CSS 渐变，从页面顶部延伸，停在图像的高度。有很多教程展示如何 overlay/underlay 渐变，但它们都假定您想要整页渐变或渐变覆盖在背景图像之上。

我现在拥有的是：

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 方法来做到这一点。

Answer 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/

在背景图像上垂直堆叠 css 渐变（未叠加）

Vertically stacking a css gradient on top of a background image (not overlaid)

css

gradient

background-image