Vue3升级必看：图片样式处理新技巧，轻松打造视觉效果！

引言

一、背景图定位与覆盖

<style>
  .image-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-image: url('path/to/image.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

<div class="image-container"></div>

这段代码中，.image-container 类定义了一个容器，其背景图通过 background-image 设置。background-position: center; 确保背景图始终位于容器，background-repeat: no-repeat; 防止背景图重复，background-size: cover; 确保背景图覆盖整个容器，同时保持其宽高比。

二、鼠标悬停放大效果

<style>
  .hover-zoom img {
    width: 200px;
    height: 150px;
    transition: transform 0.2s ease;
  }

  .hover-zoom img:hover {
    transform: scale(1.1);
  }
</style>

<div class="hover-zoom">
  <img src="path/to/image.jpg" alt="Hover to zoom">
</div>

三、图片滑动对比效果

<template>
  <div>
    <input type="range" v-model="width" />
    <div class="image-container">
      <img :style="{ width: width + 'px' }" src="path/to/top-image.jpg" />
      <img src="path/to/bottom-image.jpg" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 100
    };
  }
};
</script>

<style>
.image-container {
  position: relative;
  width: 200px;
  height: 150px;
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

四、图片蒙版与分割效果

<style>
  .split-image {
    position: relative;
    width: 600px;
    height: 400px;
  }

  .split-image::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 50%;
    background-image: url('path/to/image.jpg');
    background-position: center;
    background-size: cover;
    z-index: -1;
  }
</style>

<div class="split-image">
  <div style="position: relative;">
    <p>这里是分割后的内容</p>
  </div>
</div>

总结