background-blend-mode实现的渐变背景图标效果实例页面

展示

代码

• HTML：

  <i class="icon-delete"></i>删除

• CSS：

  .icon-delete {
      display: inline-block;
      width: 20px; height: 20px;
      background: linear-gradient(deepskyblue, deeppink), 
          url(delete.png) no-repeat center / 16px 16px, 
          white;
      background-blend-mode: lighten, normal;
      vertical-align: bottom;
  }