CSS中的目标背景图像（url）？

【问题标题】：Target background-image (url) in CSS?CSS中的目标背景图像（url）？
【发布时间】：2020-11-11 23:07:17
【问题描述】：

如果用户低于某个屏幕宽度，我很好奇是否可以使用 CSS 来定位下面的第一个 url 语法。

例如，如果用户的浏览器低于 700 像素，我不想显示第一个背景图像 (background.png) - 只显示第二个 (background1.jpg)。

<div class="right-header" style="background-image: url('/wp-content/uploads/2020/11/background.png'), url('/wp-content/uploads/2020/11/background1.jpg');">

【问题讨论】：

标签： html css

【解决方案1】：

您可以为此使用媒体查询：

在您的 CSS 文件中：

.right-header {
    background-image: url('/wp-content/uploads/2020/11/background.jpg');
}

@media screen and (max-width: 700px) {
  .right-header {
      background-image: url('/wp-content/uploads/2020/11/background1.jpg');
  }
}

在您的 HTML 中：

<div class="right-header"></div>

【讨论】：

顺便说一下，在您的代码中，您使用的是内联 CSS，强烈建议使用外部 CSS 文件，将其与link HTML 标签链接。