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!