CSS魔法揭秘：图片叠加效果，轻松实现视觉新境界

1. 背景叠加

.image-overlay {
  position: relative;
  overflow: hidden;
}

.image-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  pointer-events: none;
}

2. 文字叠加

.image-overlay .text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /* 文字颜色 */
  font-size: 24px; /* 字体大小 */
  text-align: center;
}

<div class="image-overlay">
  <img src="your-image.jpg" alt="图片">
  <div class="text-overlay">这里是文字叠加效果</div>
</div>

3. 阴影叠加

.image-overlay .shadow-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background: inherit;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影效果 */
  pointer-events: none;
}

<div class="image-overlay">
  <img src="your-image.jpg" alt="图片">
  <div class="shadow-overlay"></div>
</div>

4. 综合应用

.image-overlay {
  position: relative;
  overflow: hidden;
}

.image-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  pointer-events: none;
}

.image-overlay .text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /* 文字颜色 */
  font-size: 24px; /* 字体大小 */
  text-align: center;
}

.image-overlay .shadow-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background: inherit;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影效果 */
  pointer-events: none;
}

<div class="image-overlay">
  <img src="your-image.jpg" alt="图片">
  <div class="text-overlay">这里是文字叠加效果</div>
  <div class="shadow-overlay"></div>
</div>