css制作按钮换图
使用CSS制作按钮换图效果
通过CSS的background-image属性和伪类（如:hover）可以实现按钮悬停时切换图片的效果。以下是具体实现方法：
方法1：使用背景图片切换
.button {
width: 100px;
height: 50px;
background-image: url('normal.png');
background-size: contain;
background-repeat: no-repeat;
border: none;
cursor: pointer;
}
.button:hover {
background-image: url('hover.png');
}方法2：使用CSS精灵图（Sprite）
通过调整background-position来切换显示同一张图片的不同部分：
.button {
width: 100px;
height: 50px;
background-image: url('sprites.png');
background-position: 0 0;
border: none;
cursor: pointer;
}
.button:hover {
background-position: 0 -50px;
}方法3：使用伪元素覆盖
通过绝对定位的伪元素实现图片覆盖效果：
.button {
position: relative;
width: 100px;
height: 50px;
overflow: hidden;
}
.button::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('hover.png');
opacity: 0;
transition: opacity 0.3s;
}
.button:hover::after {
opacity: 1;
}方法4：使用CSS滤镜效果
通过滤镜实现图片颜色变化：
.button {
background-image: url('icon.png');
filter: grayscale(100%);
transition: filter 0.3s;
}
.button:hover {
filter: grayscale(0%);
}注意事项
- 确保图片路径正确
- 为提升性能，建议预加载悬停状态的图片
- 对于重要交互按钮，应同时考虑键盘可访问性（
:focus状态） - 移动设备需要添加
:active状态样式
以上方法可根据具体需求选择使用，方法1和方法2适合简单的图标切换，方法3可实现更复杂的过渡效果，方法4则适合单色图标的变色需求。
