cross-fade()函数降低背景图像透明度实例页面

展示

代码

• HTML：

  <h4>原始背景图，深色模式下太亮了</h4>
  <div class="light">文字占位示意</div>
  
  <h4>cross-fade调整背景图像透明度后</h4>
  <div class="dark">文字占位示意</div>

• CSS：

  .light,
  .dark {
      display: flex;
      width: 259px; height: 334px;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: #fff;
      background: url(../images/bg-1.jpg);
  }
  
  .dark {
      background-image: -webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(../images/bg-1.jpg), 40%);
      background-image: cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(../images/bg-1.jpg), 40%);
      background-size: 100% 100%;
  }