2

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

我知道当我使用 PNG 图像将渐变渲染到 Div 的 CSS 中时，我可以有一个工作的背景混合模式，例如：

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

然而，这会导致渐变与实际的 PNG 一样小，这不是预期的效果，如下所示： 在此处输入图像描述

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

使用 CSS 渲染的渐变在 div 上覆盖 PNG

这里有一个 Codepen 来说明我正在尝试做的事情：http ://codepen.io/anon/pen/zxOXGP 注意黑色图标。我想覆盖这个。

4

2 回答 2

5

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

下面的示例 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>

于 2014-11-11T15:39:02.513 回答
1

渐变三明治

原料

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

  • .contentdiv 形成填充中心 z 层，其中z-index: 2. 它需要position: relative使用它的 z-index。

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

这是美味的结果：

三明治结果

完整示例

为简单起见，我删除了除标准 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>

于 2014-11-11T15:32:52.087 回答