Question

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

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

有一个剪贴蒙版，应用于图像的渐变贴图（从＃663897到＃02ccfe）。

我尝试使用渐变背景创建叠加层，但它有所不同。我完全迷失了，在互联网上找不到任何东西。：（

谢谢！

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

请注意，这在Internet Explorer（browser support）

中无效

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

1 个答案: