CSS自定義屬性的一大優(yōu)勢(shì)在于它們可以作為值的組成部分。假設(shè)您正在使用多個(gè)背景來實(shí)現(xiàn)設(shè)計(jì)效果。每個(gè)背景都將擁有自己的顏色、圖像、重復(fù)方式、位置等屬性，這可能會(huì)導(dǎo)致代碼冗長！

假設(shè)您有四個(gè)圖像：

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);
}

現(xiàn)在您想在媒體查詢中添加第五個(gè)背景：

@media (min-width: 1500px) {
  body {
    /* 重復(fù)所有現(xiàn)有背景，然后添加第五個(gè)。 */
  }
}

這將非常冗長！您必須再次重復(fù)所有四個(gè)圖像，然后再添加第五個(gè)。大量的代碼重復(fù)！

一種方法是為基本背景集創(chuàng)建一個(gè)變量，然后更簡潔地添加第五個(gè)背景：

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);
  }
}

或者，您可以為每個(gè)背景圖像創(chuàng)建一個(gè)變量，然后根據(jù)需要將它們組合在一起，這可能更清晰易于管理：

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);
  }
}

以下是一個(gè)基本版本，包含支持查詢：

動(dòng)態(tài)地更改值的特定部分是 CSS 自定義屬性的一大優(yōu)勢(shì)！

此外，對(duì)于背景，最好將整個(gè)簡寫形式作為變量包含在內(nèi)。這樣，更容易一次性將所有內(nèi)容組合在一起，而無需像這樣：

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

將所有屬性放入簡寫形式并根據(jù)需要使用會(huì)更容易：

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);
}

就是這樣。

以上是使用自定義屬性管理多個(gè)背景的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！