[分享]css中怎么覆盖图片上

在CSS中，覆盖图片上的方法有很多种，下面就来介绍一下具体的实现方法。实现方法：1. 通过设置背景色来覆盖图片可以通过设置背景色来覆盖图片，比如将一个div的背景色设为与图片相同的颜色。代码示例：.c...

在CSS中，覆盖图片上的方法有很多种，下面就来介绍一下具体的实现方法。
实现方法：
1. 通过设置背景色来覆盖图片
可以通过设置背景色来覆盖图片，比如将一个div的背景色设为与图片相同的颜色。
代码示例：

.container {<br>
  background: #fff; /* 背景颜色与图片相同 */<br>
  width: 500px;<br>
  height: 500px;<br>
  position: relative;<br>
}<br>

.container img {<br>
  position: absolute;<br>
  top: 0;<br>
  left: 0;<br>
  z-index: -1; /* 图片在背景下面 */<br>
}

2. 通过设置透明度来覆盖图片
通过设置覆盖图片的元素的透明度为0，来让背景图片显示出来，同时禁止覆盖元素上的事件响应。
代码示例：

.container {<br>
  width: 500px;<br>
  height: 500px;<br>
  position: relative;<br>
}<br>

.container img {<br>
  position: absolute;<br>
  top: 0;<br>
  left: 0;<br>
  z-index: -1; /* 图片在背景下面 */<br>
}<br>

.cover {<br>
  width: 100px;<br>
  height: 100px;<br>
  position: absolute;<br>
  top: 50px;<br>
  left: 50px;<br>
  background-color: #000;<br>
  opacity: 0; /* 背景不可见 */<br>
  z-index: 1; /* 防止子元素分散 */<br>
}

3. 通过设置混合模式来覆盖图片
通过设置混合模式，让覆盖元素与图片将颜色混合起来，从而达到覆盖图片的效果。
代码示例：

.container {<br>
  width: 500px;<br>
  height: 500px;<br>
  position: relative;<br>
}<br>

.container img {<br>
  position: absolute;<br>
  top: 0;<br>
  left: 0;<br>
  z-index: -1; /* 图片在背景下面 */<br>
}<br>

.cover {<br>
  width: 100px;<br>
  height: 100px;<br>
  position: absolute;<br>
  top: 50px;<br>
  left: 50px;<br>
  background-color: #000;<br>
  mix-blend-mode: multiply; /* 使用multiply混合模式 */<br>
  z-index: 1; /* 防止子元素分散 */<br>
}

以上就是几种比较常见的覆盖图片的方法，通过这几种方法，你可以实现各种不同风格的页面。