HTML / CSS图像和颜色混合

Question

尝试将photoshop设计“转换”为HTML / CSS代码，并遇到色彩/图像混合问题。

在Photoshop设计中，我有如下图层：

• 图像（20％不透明度）
• 背景颜色（100％不透明度）

这可以转化成这样的东西：

现在理论上我可以交换顺序或图层（图像100％不透明度和背景颜色80％）但总体结果看起来不同：

以下是我必须如何包装它们：

<footer>
background image is visible here
<div>color overlay visible here</div>
</footer>

导出合并背景不是一种选择。

有什么建议吗？

Answer 1

您可以尝试mix-blend-mode

＆＃13;

＆＃13;

div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: #4770AC;
  mix-blend-mode: multiply;
  color: white;
  padding: 1em;
  font-size:2em;
}

＆＃13;

<div>
  <p>some text</p>
</div>

＆＃13;

＆＃13;

＆＃13;

渐变bg也会这样做

＆＃13;

＆＃13;

div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: linear-gradient(to bottom,#4770AC, tomato);
  mix-blend-mode: multiply;
  color: white;
  padding: 1em;
  font-size:2em;
}

＆＃13;

div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: #4770AC;
  mix-blend-mode: multiply;
  color: white;
  padding: 1em;
  font-size:2em;
}

<div>
  <p>some text</p>
</div>

＆＃13;

＆＃13;

＆＃13;

rgba()（或hsla()）颜色可能是后备

＆＃13;

＆＃13;

div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: rgba(0, 40, 100,0.8);
  color: white;
  padding: 1em;
  font-size:2em;
}

＆＃13;

<div>
  <p>some text</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为您希望叠加层位于背景之上，所以需要为其指定z索引。

HTML：

<footer>
background image is visible here
<div class="overlay">color overlay visible here</div>
</footer>

CSS：

.overlay{
     position: relative;
     z-index: 1;
 }