CSS：带有渐变“叠加”的背景图像

Posted 2023-03-06

【中文标题】CSS：带有渐变“叠加”的背景图像

【英文标题】：CSS: background image with gradient "overlay"

【发布时间】：2015-08-29 05:41:10

【问题描述】：

首先，我想完成什么：

我想要这个背景：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; 

【参考方案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%;
  

【讨论】：

问题，当前的答案使背景图案（图像）小得多。小了很多。有没有办法在不调整图像大小的情况下获得相同的结果？

并使椭圆中心更小（不那么宽）？

我已经编辑了解释如何调整图案大小的答案。要调整椭圆，只需在渐变中设置停靠点（颜色后的百分比）

【参考方案2】：

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

多背景http://www.css3.info/preview/multiple-backgrounds/

这意味着您可以更好地控制渐变，并且它对 CSS 支持的依赖程度也有所降低。为了进一步提高您的浏览器兼容性，您可以将两个元素堆叠在一起，而不是依赖 CSS 多个背景，即：

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