在网页设计中，依据屏幕尺寸开启或关闭背景图是一项实用的技巧，能显著提升用户体验。CSS 为我们提供了多种方法来实现这一需求。

媒体查询是 CSS 中实现根据屏幕尺寸控制背景图的常用手段。通过媒体查询，我们可以检测设备的屏幕宽度、高度、分辨率等信息，并据此应用不同的样式规则。例如，我们想要在大屏幕上展示一张精美的背景图，而在小屏幕设备上关闭它，以节省加载时间和优化布局。

我们需要在 CSS 中定义基本的背景图样式。比如：

body {
    background-image: url('big-screen-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

这是默认在大屏幕上展示的背景图样式。接下来，利用媒体查询针对小屏幕设备进行设置。

@media (max-width: 768px) {
    body {
        background-image: none;
    }
}

上述代码表示，当屏幕宽度小于或等于 768px 时，背景图将被关闭。max-width 设定了屏幕宽度的上限，在这个阈值内，后面花括号中的样式规则会生效。

除了使用 max-width，我们也可以使用 min-width 来开启特定屏幕尺寸以上的背景图。例如，当屏幕宽度大于等于 992px 时，展示另一种背景图。

@media (min-width: 992px) {
    body {
        background-image: url('large-screen-background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
}

这样，在不同的屏幕尺寸区间，我们可以灵活地控制背景图的显示与隐藏，或者切换不同的背景图以适配不同的设备。

还可以结合多个媒体查询条件，比如同时考虑屏幕宽度和高度。通过合理运用这些 CSS 技巧，我们能为不同设备的用户提供更优质、更适配的视觉体验，让网站在各种屏幕上都能展现出最佳效果，这对于提升网站的用户满意度和搜索引擎友好度都具有重要意义。