揭秘CSS图片覆盖：如何巧妙实现视觉叠加效果？

一、图片覆盖效果概述

二、实现图片覆盖效果的方法

1. 使用绝对定位

代码示例：

/* 被覆盖的图片 */
.cover-image {
  position: relative;
  width: 100%;
  height: auto;
}

/* 覆盖的图片或元素 */
.cover-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-image: url('cover-image.jpg');
  background-size: cover;
}

2. 使用CSS混合模式

代码示例：

/* 被覆盖的图片 */
.cover-image {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('background-image.jpg');
  background-size: cover;
}

/* 覆盖的图片 */
.cover-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('cover-image.jpg');
  background-size: cover;
  mix-blend-mode: overlay;
}

3. 使用半透明遮罩

代码示例：

/* 被覆盖的图片 */
.cover-image {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('background-image.jpg');
  background-size: cover;
}

/* 覆盖的图片 */
.cover-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('cover-image.jpg');
  background-size: cover;
  opacity: 0.5;
}

4. 使用Vue.js组件

代码示例：

<template>
  <div class="cover-image">
    <img :src="backgroundImage" alt="Background" />
    <img :src="coverImage" alt="Cover" class="cover" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundImage: 'background-image.jpg',
      coverImage: 'cover-image.jpg',
    };
  },
};
</script>

<style>
.cover-image {
  position: relative;
  width: 100%;
  height: auto;
}

.cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}
</style>

三、总结