在 CSS 中使用渐变映射剪切蒙版

Posted 2023-03-23

【中文标题】在 CSS 中使用渐变映射剪切蒙版

【英文标题】：Clipping masks with gradient map in CSS

【发布时间】：2016-07-06 08:20:47

【问题描述】：

有没有办法用 CSS 创造这样的体验？

https://www.dropbox.com/s/9kid0skuifhr5jj/Screen%20Shot%202016-03-19%20at%2017.33.16.png?dl=0

有一个剪贴蒙版将渐变映射（从 #663897 到 #02ccfe）应用于图像。

我尝试使用渐变背景创建叠加层，但结果不同。我完全迷路了，在互联网上找不到任何东西。 :(

谢谢！

【问题讨论】：

你确定你的意思是“剪贴蒙版”而不是“混合模式”吗？像这样？jsfiddle.net/3rror404/tonuauz4/1

【参考方案1】：

我想也许你正在寻找这样的东西：

.container 
  width: 500px;
  height: 300px;
  position: relative;


.overlay 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -moz-linear-gradient(left, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300);
  background: -webkit-linear-gradient(left, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300);
  background: linear-gradient(to right, #02ccfe 0%, #663897 100%), url(http://placekitten.com/g/500/300);
  background-blend-mode: hard-light;


h1 
    color: #FFF;
    position: relative;
    top: 25%;
    left: 50px;

<div class="container">
  <div class="overlay"></div>
  <h1>
    Lorem Ipsum
  </h1>
</div>

请注意，这在 Internet Explorer (browser support) 中不起作用

【讨论】：

这不是我想要的。我再展示一张图片。 tinyurl.com/hkw9dwz 如您所见，原始图像的深色部分更偏紫色，而较浅的颜色则更偏蓝。这是Photoshop图层的照片tinyurl.com/z3ac98h我不是Photoshop专业人士，我可能错了，但是有白色图层蒙版和渐变图。不是混合模式。

图像中的剪贴蒙版对输出的颜色没有影响。它将图像“裁剪”或“裁剪”为底层指定的形状。顶层是一个调整层，它可能会以某种方式改变颜色。如果您查看图层上方，您会看到混合模式下拉菜单 (i.stack.imgur.com/PHhnM.png)，它可能设置为“屏幕”或“强光”之类的东西 - 这是我在上面试图模拟的效果。如果颜色不完全正确，请调整它们。我已经向你展示了这项技术。您现在需要对其进行调整以满足您的需求。

没有混合模式。似乎它不能在 CSS 中完成。谢谢你的回答！