使用CSS显示渐变以及图像

Question

基于我在这里找到的一个非常简单的例子：<dead link removed>。

css应该同时显示透明的png和它后面的渐变。我想知道这个问题是否与css的构造有关。

body {
background-image:url('Clouds.png');
background-image: linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -ms-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.24, #9B7698),
color-stop(0.63, #4447AB));}

如果我只有image:url，它可以很好地加载云。但除此之外，它只显示梯度而不显示图像。

我也很好奇，我是否可以在底部添加一个渐变为白色的渐变，这样当页面滚动时，它就会与静态云图像网格化，但我对渐变还不够熟悉。提前谢谢。

Answer 1

您需要编写单个background(-image)-声明，并通过, 分离单个组件（图像、梯度）

background: url('Clouds.png'), linear-gradient(bottom, #9B7698 24%, #4447AB 63%);

在您的情况下，第二个背景图像定义（渐变）将覆盖第一个背景图像（您的图像）
请记住，顺序很重要！您必须首先声明图像，这样它才会出现在渐变的顶部
您可以省略旧的webkit语法，不再需要它了。

还要注意，并非每个浏览器都支持多个背景图像！

Answer 2

在支持的浏览器中，可以使用多种背景：

background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');

这会将云图像放置在渐变上方。还要注意，我删除了旧的webkit语法和-ms-前缀，并更改了顺序。不需要-ms-前缀，因为没有一个稳定的IE版本只支持带前缀的渐变。