使用自定义属性管理多个背景

CSS自定义属性的一大优势在于它们可以作为值的组成部分。假设您正在使用多个背景来实现设计效果。每个背景都将拥有自己的颜色、图像、重复方式、位置等属性，这可能会导致代码冗长！

假设您有四个图像：

body {
  background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px;
  background-repeat: no-repeat;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
}

现在您想在媒体查询中添加第五个背景：

@media (min-width: 1500px) {
  body {
    /* 重复所有现有背景，然后添加第五个。 */
  }
}

这将非常冗长！您必须再次重复所有四个图像，然后再添加第五个。大量的代码重复！

一种方法是为基本背景集创建一个变量，然后更简洁地添加第五个背景：

body {
  --baseBackgrounds: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px;
  background-repeat: no-repeat;
  background-image: var(--baseBackgrounds);
}
@media (min-width: 1500px) {
  body {
    background-image: var(--baseBackgrounds), url(added-fifth-background.svg);
  }
}

或者，您可以为每个背景图像创建一个变量，然后根据需要将它们组合在一起，这可能更清晰易于管理：

body {
  --bg1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg);
  --bg2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg);
  --bg3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg);
  --bg4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  --bg5: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  background-image: var(--bg1), var(--bg2), var(--bg3), var(--bg4);
}
@media (min-width: 1500px) {
  body {
    background-image: var(--bg1), var(--bg2), var(--bg3), var(--bg4), var(--bg5);
  }
}

以下是一个基本版本，包含支持查询：

动态地更改值的特定部分是 CSS 自定义属性的一大优势！

此外，对于背景，最好将整个简写形式作为变量包含在内。这样，更容易一次性将所有内容组合在一起，而无需像这样：

--bg_1_url: url();
--bg_1_size: 100px;
--bg_1_repeat: no-repeat;
/* etc. */

将所有属性放入简写形式并根据需要使用会更容易：

body {  
  --bg_1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg) top 10px left 10px / 86px no-repeat;
  --bg_2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg) top 10px right 10px / 86px no-repeat;
  --bg_3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg) bottom 10px right 10px / 86px no-repeat;
  --bg_4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg) bottom 10px left 10px  / 86px no-repeat;

  background: var(--bg_1), var(--bg_2), var(--bg_3), var(--bg_4);
}

就是这样。

以上是使用自定义属性管理多个背景的详细内容。更多信息请关注PHP中文网其他相关文章！