Question

一般来说，我知道可以使用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，则会正确呈现渐变。关于为什么会有这种差异的任何想法？

Answer 1

我尝试了评论中提到的一些技巧，但最终起作用的是以下内容：

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的小提琴相矛盾，尽管给出了相反的顺序，但它也表现出了理想的行为。

Answer 2

fiddle link Christoph posted也适用于Chrome。为了在Firefox中使用叠加功能，我必须在height元素中添加min-height: 100%或html。请参阅this fiddle。

但是，只需让内容给出了高度，并且还允许后台在this fiddle显示的Firefox中工作。

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

CSS3不在HTML元素上显示背景图像+渐变

2 个答案: