Verwalten Sie mehrere Hintergründe mit benutzerdefinierten Eigenschaften

Einer der großen Vorteile von CSS -benutzerdefinierten Eigenschaften besteht darin, dass sie als Wertekomponenten verwendet werden können. Angenommen, Sie verwenden mehrere Hintergründe, um den Entwurfseffekt zu erzielen. Jeder Hintergrund verfügt über eigene Eigenschaften wie Farbe, Bild, Wiederholung, Ort usw., was zu ausführlicher Code führen kann!

Angenommen, Sie haben vier Bilder:

 Körper {
  Hintergrundposition: Oben 10px links 10px, oberes 10px rechts 10px, unten 10px rechts 10px, unten 10px links 10px;
  Hintergrundrepeat: No-Repeat;
  Hintergrund-Image: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-top-left.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-bomlight.svg),, URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-bottom-right.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-bottom-left.svg);
}

Jetzt möchten Sie der Medienabfrage einen fünften Hintergrund hinzufügen:

 @media (Min-Width: 1500px) {
  Körper {
    /* Wiederholen Sie alle vorhandenen Hintergründe und fügen Sie eine fünfte hinzu. */
  }
}

Das wird sehr ausführlich sein! Sie müssen alle vier Bilder wieder wiederholen und den fünften hinzufügen. Viele Code -Duplikation!

Eine Möglichkeit besteht darin, eine Variable für den grundlegenden Hintergrundsatz zu erstellen und dann einen fünften Hintergrund besser hinzuzufügen:

 Körper {
  --BaseBackgrounds: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-nt.svg), URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-bom-bom-bom-light.svg),, URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-bottom-right.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/angles-bottom-left.svg);
  Hintergrundposition: Oben 10px links 10px, oberes 10px rechts 10px, unten 10px rechts 10px, unten 10px links 10px;
  Hintergrundrepeat: No-Repeat;
  Hintergrundbild: var (-Basebackgrounds);
}
@media (Min-Width: 1500px) {
  Körper {
    Hintergrundbild: var (-Basebackgrounds), URL (addiertes Background.svg);
  }
}

Alternativ können Sie für jedes Hintergrundbild eine Variable erstellen und sie dann bei Bedarf zusammen gruppieren, was möglicherweise klarer und einfacher zu verwalten ist:

 Körper {
  ---BG1: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-lteft.svg);
  ---BG2: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-ight.svg);
  ---BG3: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-ight.svg);
  --bg4: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-lteft.svg);
  --BG5: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-lteft.svg);
  Hintergrundbild: var (-bg1), var (-bg2), var (-bg3), var (-bg4);
}
@media (Min-Width: 1500px) {
  Körper {
    Hintergrundbild: var (-bg1), var (-bg2), var (-bg3), var (-bg4), var (-bg5);
  }
}

Hier ist eine grundlegende Version, die Support -Abfragen enthält:

Das dynamische Ändern bestimmter Werte von Werten ist ein großer Vorteil der CSS -benutzerdefinierten Eigenschaften!

Darüber hinaus ist es für den Hintergrund am besten, die gesamte Abkürzung als Variable einzubeziehen. Dies erleichtert es, alles auf einmal zusammenzusetzen, ohne es so tun zu müssen:

 --bg_1_url: url ();
-BG_1_SIZE: 100px;
--BG_1_Repeat: No-Repeat;
/* usw. */

Es wird einfacher sein, alle Eigenschaften in die Abkürzung zu setzen und sie bei Bedarf zu verwenden:

 Körper {  
  -BG_1: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg) Top 10px links 10px/86px No-Repeat;
  -BG_2: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg) Top 10px rechts 10px/86px no-repeat;
  -BG_3: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg) Bottom 10px rechts 10px/86px No-Repeat;
  -BG_4: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-lteft.svg) Bottom 10px links 10px/86px No-Repeat;

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

Das war's.

Das obige ist der detaillierte Inhalt vonVerwalten Sie mehrere Hintergründe mit benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!