3

一般来说，我知道可以使用 CSS3 来指定多个背景，并且我之前已经成功地在图像顶部叠加了渐变。但是，当应用于基本html元素时，这似乎失败了。在 Chrome 和 Firefox 中，渐变不会在下面的 CSS 中呈现：

html {
    background:#14283C;
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0)));
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
}

如果我将相同的样式应用于body，则渐变会正确呈现。关于为什么会有这种差异的任何想法？

4

2 回答 2

2

我尝试了评论中提到的一些技巧，但最终奏效的是：

html{
    background:#14283C;
    background-image:-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))),url('/images/bluenoise.png?1338386219');
    background-image:-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
}

唯一的变化是我在图像之前列出了渐变。看起来各种background-image参数以相反的顺序重叠。不过，这种解释似乎与 ScottS 的小提琴相矛盾，尽管给出了相反的顺序，但它也显示了所需的行为。

于 2012-05-31T16:14:00.887 回答
1

Christoph 发布的小提琴链接在 Chrome 中也适用于我。为了让覆盖在 Firefox 中发挥作用，我必须在元素中添加一个height或。看到这个小提琴。min-height: 100%html

然而，简单地拥有内容也提供了高度，并且还允许背景为 Firefox 工作，正如这个小提琴所示。

显然，渐变需要某种元素的实际高度才能在 Firefox 中呈现。

于 2012-05-30T13:34:40.607 回答