SVG内联背景作为CSS自定义属性值使用实例页面

展示

代码

• HTML：

  <h4>1. 作为背景图像</h4>
  <span class="icon-check"></span>
  
  <h4>2. 作为内容图像</h4>
  <input placeholder="可选"> <span class="valid-pass"></span>

• CSS：

  :root {
      --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
  }
  .icon-check {
      background: var(--icon-check) no-repeat center / 100%;
      /* 尺寸限制 */
      display: inline-block;
      width: 20px; height: 20px;
  }
  .valid-pass::after {
      content: var(--icon-check);
      /* 尺寸限制 */
      display: inline-block;
      width: 20px; height: 20px;
  }
  
  .valid-pass {
      display: inline-block;
  }
  .icon-check {
      border: 1px solid gray;
      border-radius: 2px;
  }