[分享]css中小图标的设为背景

CSS中小图标被广泛使用于网页设计中，可以用来美化界面，区分不同的内容或者作为按钮的图标。通常，我们使用background属性来将小图标作为元素的背景。.icon { width: 20px; he...

CSS中小图标被广泛使用于网页设计中，可以用来美化界面，区分不同的内容或者作为按钮的图标。通常，我们使用background属性来将小图标作为元素的背景。

.icon {
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: center center;
} 

在上述代码中，icon.png是我们想要设置为背景的小图标文件。我们将这个文件作为背景图片，并设置不重复（background-repeat: no-repeat）以及居中对齐（background-position: center center）。

如果我们想要将小图标作为按钮使用，就可以通过:hover伪类来改变背景图片，从而实现鼠标悬停效果。

.btn {
  width: 100px;
  height: 40px;
  background-image: url('default.png');
  background-repeat: no-repeat;
  background-position: center center;
}

.btn:hover {
  background-image: url('hover.png');
} 

在上述代码中，我们先定义了一个按钮样式.btn，并设置默认背景图片default.png。当鼠标悬停在按钮上时，我们将背景图片改为hover.png，从而呈现出鼠标悬停效果。

总之，使用小图标作为背景是CSS中实现美化和交互效果的常用方法，可以帮助我们优化用户体验。