CSS 媒体查询和背景图片

在本文中，我们将介绍CSS媒体查询和背景图片的使用。媒体查询是CSS3的一项功能，可以根据设备的特性和用户的习惯来应用不同的样式。背景图片是网页设计中常用的元素，可以为网页增加美观和吸引力。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是媒体查询

媒体查询是一种用于判断设备特性和用户习惯的CSS功能。通过媒体查询，我们可以根据设备的屏幕宽度、设备类型、屏幕分辨率等特性来应用不同的样式。媒体查询使用@media关键字定义，并可以包含一个或多个条件表达式。例如，以下媒体查询将在屏幕宽度小于600像素时应用样式：

@media (max-width: 600px) {
  /* 样式规则 */
}

媒体查询还支持逻辑运算符，例如AND、OR和NOT。我们可以通过这些逻辑运算符来组合多个条件。例如，以下媒体查询将在屏幕宽度小于600像素且设备类型为手机时应用样式：

@media (max-width: 600px) and (orientation: portrait) {
  /* 样式规则 */
}

媒体查询不仅可以应用于屏幕样式，还可以应用于打印样式。通过媒体查询，我们可以为打印页面提供特定的样式，以确保打印页面的可读性。

使用媒体查询

媒体查询可以用于改变背景图片，改变字体大小，隐藏元素等等。其中一个常见的用法是根据设备屏幕宽度来选择不同大小的背景图片。例如，我们可以在手机上使用小尺寸的背景图片，在平板电脑上使用中等尺寸的背景图片，在电脑上使用大尺寸的背景图片。

下面是一个示例，我们使用媒体查询来根据设备屏幕宽度选择不同大小的背景图片：

body {
  background-image: url('small.jpg');
}

@media (min-width: 768px) {
  body {
    background-image: url('medium.jpg');
  }
}

@media (min-width: 1024px) {
  body {
    background-image: url('large.jpg');
  }
}

在这个示例中，当屏幕宽度小于768像素时，背景图片为small.jpg。当屏幕宽度在768像素到1024像素之间时，背景图片为medium.jpg。当屏幕宽度大于1024像素时，背景图片为large.jpg。

CSS 切换背景图片属性

除了使用媒体查询来改变背景图片，我们还可以使用CSS的:hover伪类来切换背景图片。这使得我们可以在鼠标悬停在某个元素上时改变背景图片。

下面是一个示例，我们使用:hover伪类来切换背景图片：

.button {
  background-image: url('normal.jpg');
}

.button:hover {
  background-image: url('hover.jpg');
}

在这个示例中，当鼠标悬停在<button>元素上时，背景图片将从normal.jpg切换为hover.jpg。

总结

通过媒体查询和背景图片，我们可以在不同的设备和用户习惯下应用不同的样式。媒体查询可以根据设备的特性和用户的习惯来选择不同的样式，而背景图片可以为网页增加美观和吸引力。我们可以使用媒体查询来改变背景图片的大小，也可以使用:hover伪类来切换背景图片。掌握这些技术，可以让我们的网页在不同设备上呈现出最佳的效果。