使用 CSS 选择性地仅更改多个 HTML 背景图像大小中的一个

Question

我正在编写一个使用多个图像作为背景的网站，如下所示，

background-image:
   url('someimage1.png'),
   url('image2.png'),
   url('image3.png');

而且我可以像这样在一个语句中更改每个图像的某些 CSS 样式属性，

background-size:
   5vw auto,      // styles image 1
   100% 99%,      // then image 2
   auto 98vh;     // and 3

例如，我可以更改第三张背景图片的 background-size 属性而不以任何方式更改第一张和第二张背景图片吗？我希望能够以 'responsive' 的方式更改其中一张图片的尺寸，但无论如何都要让其他两张图片保持相同的尺寸。

我最好能够在不使用 javascript 的情况下实现这一目标。

Answer 1

您可以使用变量并通过媒体查询或自定义轻松更新它们类:

:root {
  --size-one: 100% 50%;
  --size-two: 50% 100%;
  --size-three: 80% 100%;
}

.back {
  height: 200px;
  background-image: linear-gradient(to right, red, red), linear-gradient(black, blue), linear-gradient(30deg, black, green);
  background-repeat: no-repeat;
  background-size: var(--size-one), var(--size-two), var(--size-three);
}

.update {
  --size-three: 80% 80%;
}

@media all and (max-width:800px) {
  :root {
    --size-one: 80% 50%;
  }
}

<div class="back">
</div>
<div class="back update">
</div>

使用 CSS 选择性地仅更改多个 HTML 背景图像大小中的一个

Selectively changing only one of multiple HTML background image sizes with CSS

html

css

background-image