css不同状态对应不同图片

CSS可以让网页变得更加美观和有趣，其中一种常见的应用就是根据不同状态展示不同的图片。比如，当用户鼠标悬停在一个链接上时，我们希望链接的颜色能够改变成另一种颜色，或者出现一个下划线。这时，我们就需要用到:hover伪类。

a:hover {
  color: red;
  text-decoration: underline;
} 

上面这段代码的意思是，当用户将鼠标悬停在链接上时，链接将变成红色，并且有下划线。

而当用户点击这个链接后，我们可能希望这个链接的颜色和样式都发生改变，告诉用户这个链接已经被点击过了。这时，我们就需要使用:active伪类。

a:active {
  color: blue;
  transform: translateY(2px);
} 

上面这段代码的意思是，在用户点击链接时，链接将变成蓝色，并且向下移动2个像素。

另外，我们还可以根据元素的不同状态设置不同的背景图像。:focus伪类表示元素获得焦点时的状态。

input[type='text']:focus {
  background-image: url('input-focused.png');
} 

上面这段代码的意思是，在文本输入框获得焦点时，这个文本框会显示一个叫做input-focused.png的背景图片。

CSS提供了很多不同的伪类，可以让我们对元素的不同状态进行样式设计，这样能够使网页更加动态和生动。