3

基于我在这里找到的非常简单的示例：<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));}

如果我只有图像：url，它会很好地加载云。但否则它只显示渐变而不是图像。

我也很好奇我是否可以在底部添加一个渐变为白色的额外渐变，以便在页面滚动时它与静态云图像啮合，但我对渐变不太熟悉。提前致谢。

4

2 回答 2

1

您需要编写一个单一 background(-image)的声明，并将单个组件（图像，渐变）分开,

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

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

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

于 2012-07-25T08:12:29.617 回答
0

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

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 仅支持前缀渐变。

于 2012-07-25T08:15:39.527 回答