前端笔记(Iview前端框架)

css

iview中两个Image组件组合到一块

<div class="image-overlay-container">
	<Image :src="require('@/assets/bedcard_05.png')" fit="fill" width="50px" height="50px" :transfer="true" class="overlay-image"/>
	<Image :src="require('@/assets/ico4.png')" fit="fill" width="85px" height="105px" class="base-image"/>
</div>

<style scoped>
.image-overlay-container {
  position: relative; /* 作为绝对定位元素的容器 */
}

.base-image,
.overlay-image {
  position: absolute;
  top: 0;
  left: 0; /* 使两个图像对齐容器的左上角 */

  /* 保持相同的尺寸 */
  width: 85px;
  height: 105px;

  /* 可根据需求调整透明度或混合模式 */
  /* opacity: 0.5; */
  /* mix-blend-mode: multiply; */		-----可以用混合模式但是两个图片都交融了 看不出来层次了 可以用 z-index来控制层级

  /* 若需要，可以调整 z-index 控制覆盖层级 */
  z-index: 1;
}

/* 调整叠加图像相对于基础图像的位置（此处为示例，实际应根据需求设定） */
.overlay-image {
  /* top: 5px;
  /* left: 5px; */
  /* z-index: 9; */
}
</style>