CSS:渐变“叠加”

时间:2015-06-13 07:26:13

标签: html css css3 gradient radial-gradients

首先,我想要完成的事情:

desired gradient

(Image' source)

现在,要解决的问题:

  • 我希望渐变的中心是100%透明的。我会在页面的中心放置文字和其他内容,换句话说,我希望没有渐变色“阻挡”页面的中心。
  • 我希望渐变“叠加”覆盖整个页面,而不是每次重复图像

我尝试了许多不同的方法在背景图像上放置渐变,有些工作但没有我想要的结果。根据每个{image}重复,唯一有效的方法是将渐变放在图像上。

这最后一次尝试甚至都行不通。更不用说,我没有在提供的样本图像上复制渐变:

body {
    background: url('http://www.juvera.me/_img/vista.png') center center repeat,
    radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 50%,rgba(40,52,59,1) 100%); /* W3C */
    opacity: .8; 
}

2 个答案:

答案 0 :(得分:3)

最好逐个设置不同的属性,更容易检查你在做什么。

顺序恰恰相反,你要叠加的元素必须是第一个背景图像

第一个背景尺寸是渐变之一,第二个背景尺寸(30像素)是重复图案的尺寸。您可以根据需要调整它。

body {
  height: 100%;
    background-image: 
    radial-gradient(ellipse at center, rgba(181,189,200,0) 0%,rgba(130,140,149,0) 50%,rgba(40,52,59,1) 100%), url('http://www.juvera.me/_img/vista.png');
     background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 30px 30px;
}
html {
  height: 100%;
  }

答案 1 :(得分:1)

如果您有多个背景图片怎么办?底部背景图像是您的重复图案,顶部是透明PNG(PNG-24),带有预渲染叠加层。这将从中心的黑色100%淡化为黑色0%。

这意味着您可以更好地控制渐变,并且稍微依赖于CSS支持。为了进一步提高浏览器兼容性,您可以将两个元素相互堆叠,而不是依赖于CSS多个背景,即:

<div class="pattern">
    <div class="overlay">
        My page
    </div>
</div>