cross-fade()函数基本效果示意实例页面

展示

代码

• HTML：

  <h4>图片和图片混合</h4>
  <div class="cross-fade-image"></div>
  
  <h4>图片和渐变混合</h4>
  <div class="cross-fade-gradient"></div>

• CSS：

  .cross-fade-image {
      width: 300px; height: 300px;
      background: no-repeat center / contain;
      background-image: url(1.jpg), url(2.jpg);
      background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
      background-image: cross-fade(url(1.jpg), url(2.jpg), 50%);   
  }
  .cross-fade-gradient {
      width: 300px; height: 300px;
      background: #eee no-repeat center / contain;
      background-image: url(1.jpg), 
          radial-gradient(circle closest-corner at 200px 150px, yellow, transparent);
      background-image: -webkit-cross-fade(url(1.jpg), 
          radial-gradient(circle closest-corner at 200px 150px, yellow, transparent),
          50%);
      background-image: cross-fade(url(1.jpg), 
          radial-gradient(circle closest-corner at 200px 150px, yellow, transparent),
          50%);
  }