html - CSS:渐变背景图片 "overlay"

Question

首先，我想完成的事情:

• 我想要这个背景:http://codepen.io/anon/pen/mJwYye
• 使用与图片上相似的渐变:

(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; 
}

Answer 1

最好将不同的属性一一设置，这样更容易检查你在做什么。

而且顺序相反，要叠加的元素必须是第一个背景图

第一个 background-size 是渐变的大小，第二个 (30 px) 是重复图案的大小。您可以根据需要对其进行调整。

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%;
  }