CSS 混合模式的颜色变化

codepen: https://codepen.io/giana/pen/PqVbRr

<div class="content"></div>
<section class="one">
  <div class="wrapper"></div>
</section>
<section class="two">
  <div class="wrapper"></div>
</section>
<section class="three">
  <div class="wrapper"></>
</section>
.wrapper:before, .content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  z-index: 1000;
}
.content {
  width: 18em;
  height: 12em;
  background: #fff;
  mix-blend-mode: lighten;
}
.content:after {
  content: 'BLEND';
  font-size: 4em;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
section {
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
  position: relative;
  height: 100vh;
  padding: 1em;
}
.wrapper {
  clip: rect(auto auto auto auto);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.wrapper:before {
  content: "";
  width: 26em;
  height: 18em;
  mix-blend-mode: darken;
}
.one {
  background-image: url(https://img.xiaoyulive.top/imgs/date/20190709/009.jpg);
}
.one .wrapper:before {
  background: red;
}
.two {
  background-image: url(https://img.xiaoyulive.top/imgs/date/20190709/010.jpg);
}
.two .wrapper:before {
  background: #6c320a;
  mix-blend-mode: screen;
}
.three {
  background-image: url(https://unsplash.it/1920/1080?image=634);
}
.three .wrapper:before {
  background: #e4135d;
}

简化版本

<div class="content"></div>
<div class="bg"></div>
.content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  z-index: 1000;
  width: 18em;
  height: 12em;
  background: #0ff;
  mix-blend-mode: darken;
}
.bg {
  background-image: url(https://unsplash.it/1920/1080?image=634);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress