两个元素上的 CSS 背景混合模式

Posted 2023-02-23

【中文标题】两个元素上的 CSS 背景混合模式

【英文标题】：CSS Background-Blend-Mode over two Elements

【发布时间】：2014-11-11 14:51:16

【问题描述】：

让我们假设我有一个 div 应用了一个渐变作为 背景-属性。 我现在想要覆盖黑色 PNG（尺寸较小）并将 PNG 设置为具有覆盖的 background-blend-mode。不幸的是，我不知道如何实现这一目标。

我知道当我使用 PNG 图像将渐变渲染到 Div 的 CSS 中时，我可以有一个工作的 background-blend-mode：

background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;

然而，这会导致渐变与实际的 PNG 一样小，这不是预期的效果，如下所示：

我想要实现的是纯 CSS（如果可能的话）：

这里有一个 Codepen 来说明我想要做什么：http://codepen.io/anon/pen/zxOXGP 注意黑色图标。我想覆盖这个。

【问题讨论】：

您能否提供一个示例，说明您的 html 设置方式。也许也是一个jsfiddle？

codepen 添加。这是一个非常简单的设置。

对不起，我一定不是这个问题的合适人选，在我看来，你的 codepen 正在做你正在寻找的东西。我赞成这个问题。

谢谢。我希望 PNG 不是黑色的，我希望它与背景混合。我已经更新了图片来说明我的问题。

【参考方案1】：

尝试使用mix-blend-mode 而不是background-blend-mode，并切换到加号的简单文本或更多自定义图形的网络字体。

Example Codepen以下：

.placeholder 
  position: relative;
  width: 400px;
  height: 300px;
  background-image: -moz-linear-gradient(#ff0000, #0000ff);
  background-image: -webkit-linear-gradient(#ff0000, #0000ff);
  background-image: linear-gradient(#ff0000, #0000ff);

.center 
  position: absolute;
  top: 25%;
  width: 100%;
  font-size: 120px;

.center span 
  display: block;
  text-align: center;
  color: red;
  mix-blend-mode: screen;

<div class="placeholder">
  <div class="center"><span>+</span>
  </div>
</div>

【讨论】：

+1！请在问题中包含 sn-p 以获得您的答案。这次我为您添加了 sn-p，它很好地说明了您的解决方案:)

【参考方案2】：

渐变三明治

成分

:before与z-index: 1形成底部z层，完全不透明

.content div 与z-index: 2 形成填充中心 z 层。它需要position: relative 来获取它的z-index。

:after 与 z-index: 3 形成顶部 z 层并完成我们的午餐项目。它是半透明的。

这是美味的结果：

完整示例

为了简单起见，我删除了除了标准 CSS3 渐变之外的所有渐变。在支持的浏览器中查看。

.gradient 
  position: relative;
  height: 200px;
  padding: 20px;

.gradient:before,
.gradient:after 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  display: block;  
  background-size: 100%;
  background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
  opacity: 0.5;

.gradient:before 
  opacity: 1;
  z-index: 1;

.gradient:after 
  z-index: 3;

.overlayed_image 
  position: relative;
  width: 64px;
  height: 64px;
  display: block;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(http://cdn.flaticon.com/png/256/9029.png);


.content 
  position: relative;
  z-index: 2;

<div class="gradient">
  <div class="content">
    You can see me! 
    <div class="overlayed_image"></div>
  </div>
</div>

【讨论】：

虽然这是一个非常漂亮的解决方案，但它并不是我想要的，因为我们基本上用不透明度覆盖了 PNG，但没有混合选项。你上面的答案展示了我真正想要实现的目标。无论如何谢谢你（：

哦，好的！那你就没有三明治了：）我明白你现在需要什么了。享受吧！