Question

基于我在此处找到的非常简单的示例：http://askthecssguy.com/articles/css-gradients-and-background-images/ 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));}

如果我只有图像：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的稳定版本仅支持前缀渐变。

使用CSS显示渐变和图像

2 个答案: