1

我在玩的时候发现了一些奇怪的东西mix-blend-mode。当我修复背景图像时，mix-blend-mode效果不起作用。这发生在 Chrome 中。但在 Firefox 中它工作正常。这很糟糕，因为我经常使用视差。知道为什么会发生这种情况或如何解决它，以便我可以修复背景并仍然使用mix-blend-mode？

psfixed从这里删除 -->background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center fixed;你会看到它工作正常。除了，背景随着滚动移动:(

这是一个例子：

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect2">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect1">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect4">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect5">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect6">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect7">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect8">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect9">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect10">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect11">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect12">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect13">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect14">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect15">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect16">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect17">BRAZIL</h1></div>
  </div>

CSS：

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center fixed;
  background-size: cover;
  height:100%;
}
h1 {
  font-family: raleway, sans-serif;
  text-align:center;
  font-size: 75px;
  line-height: 60px;
  padding: 10px;
  background: #333;
  color: white;
}

.effect2{ mix-blend-mode: normal;}
.effect1{ mix-blend-mode: multiply;}
.effect4{ mix-blend-mode: screen;}
.effect5{ mix-blend-mode: overlay;}
.effect6{ mix-blend-mode: darken;}
.effect7{ mix-blend-mode: lighten;}
.effect8{ mix-blend-mode: color-dodge;}
.effect9{ mix-blend-mode: color-burn;}
.effect10{ mix-blend-mode: hard-light;}
.effect11{ mix-blend-mode: soft-light;}
.effect12{ mix-blend-mode: difference;}
.effect13{ mix-blend-mode: exclusion;}
.effect14{ mix-blend-mode: hue;}
.effect15{ mix-blend-mode: saturation;}
.effect16{ mix-blend-mode: color;}
.effect17{ mix-blend-mode: luminosity;}

这就是我所看到的： 在此处输入图像描述

你可以使用这个CODEPEN

4

0 回答 0