::selection改变图片选中后的颜色实例页面

展示

代码

• HTML：

  <div class="list">
      <img class="cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
      <img class="avatar" src=".1.jpg">
      <div class="detail">
          <h4>分享文章的标题</h4>
          <p>分享文章的描述，分享文章的描述，分享文章的描述，分享文章的描述……</p>
      </div>
  </div>
  

• CSS：

  .list {
      display: flex;
      border: 1px solid #bbb;
      padding: 10px;
      margin: 1em 0;
      user-select: all;
      position: relative;
  }
  img::selection {
      background-color: maroon;
  }
  .avatar {
      width: 64px; height: 64px;
      margin-right: 8px;
      user-select: none;
      pointer-events: none;
  }
  .list h4,
  .list p {
      margin: 0;
      user-select: none;
      pointer-events: none;
  }
  .detail {
      flex: 1;
  }
  .cover {
      position: absolute;
      left: 0; top: 0;
      width: 100%; height: 100%;
      pointer-events: none;
  }