我尝试了许多不同的方法在背景图像上放置渐变,有些工作但没有我想要的结果。根据每个{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;
}
答案 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>