Verwalten mehrerer Hintergründe mit benutzerdefinierten Eigenschaften

Eine coole Sache an CSS-benutzerdefinierten Eigenschaften ist, dass sie ein *Teil* eines Wertes sein können. Nehmen wir an, Sie verwenden mehrere Hintergründe für ein Design. Jeder Hintergrund hat seine eigene Farbe, sein eigenes Bild, seine eigene Wiederholung, Position usw. Das kann umständlich sein!

Sie haben vier Bilder

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

Sie möchten ein fünftes in einer Media Query hinzufügen

@media (min-width: 1500px) {
  body {
    /* REPEAT all existing backgrounds, then add a fifth. */
  }
}

Das wird *extrem umständlich*! Sie müssen alle vier Bilder wiederholen und *dann* das fünfte hinzufügen. Da gibt es viel Duplizierung.

Eine Möglichkeit ist, eine Variable für das Basisset zu erstellen und dann das fünfte viel sauberer hinzuzufügen

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

Aber es liegt wirklich an Ihnen. Es könnte sinnvoller und einfacher zu verwalten sein, wenn Sie jedes Hintergrundbild zu einer Variable machen und sie dann nach Bedarf zusammensetzen.

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

Hier ist eine grundlegende Version davon, einschließlich einer Supports-Abfrage

Sehen Sie den Pen
Mehrere Hintergründe mit benutzerdefinierten Eigenschaften von Chris Coyier (@chriscoyier)
auf CodePen.

Das dynamische Ändern nur eines Teils eines Wertes ist eine große Stärke von CSS-benutzerdefinierten Eigenschaften!

Beachten Sie auch, dass es bei Hintergründen am besten sein könnte, die gesamte Kurzschreibweise als Variable einzubinden. Auf diese Weise ist es viel einfacher, alles auf einmal zusammenzusetzen, anstatt etwas wie ... zu benötigen.

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

Es ist einfacher, alle Eigenschaften in Kurzschreibweise einzufügen und nach Bedarf zu verwenden

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

So wie hier.