答案：通过CSS的opacity和transition属性可实现图片渐隐渐显效果，设置初始opacity值并结合: hover改变透明度，利用transition定义过渡动画，实现平滑淡入淡出。
实现图片的渐隐渐显效果，可以通过CSS中的 transition 与 opacity 属性配合完成。这种效果常用于鼠标悬停时淡入淡出图片，提升页面交互体验。
基本原理：opacity 与 transition 结合
opacity 控制元素的透明度，取值范围为 0（完全透明）到 1（完全不透明）。transition 负责定义 opacity 变化的过程，实现平滑过渡。
只需设置初始透明度，再通过伪类（如 :hover）改变 opacity 值，浏览器会自动补全中间帧，形成渐变动画。
实现步骤
以下是实现图片渐隐渐显的具体方法：
立即学习“前端免费学习笔记（深入）”；
- 给图片设置默认 opacity 值（如 1）和 transition 属性，指定作用属性和持续时间
- 使用 :hover 选择器将 opacity 改为 0（或目标值）
- 可结合 display 或 visibility 实现完全隐藏，但 opacity 更适合平滑过渡
代码示例
以下是一个简单的 HTML + CSS 示例：
<style>
.fade-img {
opacity: 1;
transition: opacity 0.5s ease;
}
.fade-img:hover {
opacity: 0;
}
</style>
<img src="example.jpg" class="fade-img" alt="渐隐渐显图片">
当鼠标移上图片时，它会在 0.5 秒内平滑变为完全透明；移开时又逐渐恢复显示。
进阶技巧
可进一步优化交互体验：
- 调整 transition-timing-function 使用 ease-in、ease-out 等函数控制速度曲线
- 与其他属性（如 transform）同时过渡，创建更丰富的效果
- 配合 JavaScript 动态切换 class，实现定时淡入淡出轮播图
- 确保父容器不裁剪溢出内容，避免影响视觉表现
基本上就这些。只要掌握 opacity 和 transition 的配合，就能轻松做出自然的渐隐渐显效果，不复杂但容易忽略细节。
