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则适合单色图标的变色需求。