使用CSS显示渐变和图像

基于我在这里找到的一个非常简单的例子：

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，它可以很好地加载云。但除此之外，它只显示梯度，而不显示图像

---

我也很好奇，如果我能有一个额外的梯度，在底部逐渐变为白色，这样当页面滚动时，它就会与静态云图像啮合，但我对梯度一般来说还不够熟悉。提前感谢。

您需要编写一个单个

背景（-image）

-声明，并通过

，

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

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

---

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

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

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版本只支持前缀渐变。

谢谢！这在我所有的测试浏览器中都运行良好，我看到了它是如何为将来构建的。