使用自定義屬性管理多個背景

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中文網其他相關文章！