Gérer plusieurs arrière-plans avec des propriétés personnalisées

L'un des grands avantages des propriétés personnalisées CSS est qu'ils peuvent être utilisés comme composants des valeurs. Supposons que vous utilisez plusieurs arrière-plans pour réaliser l'effet de conception. Chaque arrière-plan aura ses propres propriétés telles que la couleur, l'image, la répétition, l'emplacement, etc., ce qui peut conduire à un code verbeux!

Supposons que vous ayez quatre images:

 corps {
  Position d'arrière-plan: supérieur 10px gauche 10px, supérieur 10px droit 10px, 10px inférieur 10px, 10px inférieur 10px gauche;
  République de fond: sans répétition;
  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-bottom-might.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);
}

Vous souhaitez maintenant ajouter un cinquième fond à la requête multimédia:

 @media (min-large: 1500px) {
  corps {
    / * Répétez tous les arrière-plans existants et ajoutez un cinquième. * /
  }
}

Ce sera très verbeux! Vous devez répéter à nouveau les quatre images et ajouter la cinquième. Beaucoup de duplication de code!

Une façon consiste à créer une variable pour l'ensemble d'arrière-plan de base, puis à ajouter un cinquième arrière-plan plus concise:

 corps {
  --basebackgrounds: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), URL (https://angles-us-est--2.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);
  Position d'arrière-plan: supérieur 10px gauche 10px, supérieur 10px droit 10px, 10px inférieur 10px, 10px inférieur 10px gauche;
  République de fond: sans répétition;
  Image d'arrière-plan: var (- Basebackgrounds);
}
@media (min-large: 1500px) {
  corps {
    Image d'arrière-plan: var (- Basebackgrounds), URL (Ajout-cinquième-fond.svg);
  }
}

Alternativement, vous pouvez créer une variable pour chaque image d'arrière-plan, puis les regrouper selon les besoins, ce qui peut être plus clair et plus facile à gérer:

 corps {
  ---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);
  Image en arrière-plan: var (- bg1), var (- bg2), var (- bg3), var (- bg4);
}
@media (min-large: 1500px) {
  corps {
    Image en arrière-plan: var (- bg1), var (- bg2), var (- bg3), var (- bg4), var (- bg5);
  }
}

Voici une version de base qui contient des requêtes de support:

La modification dynamique des parties spécifiques des valeurs est un gros avantage des propriétés personnalisées CSS!

De plus, pour le fond, il est préférable d'inclure toute l'abréviation en tant que variable. Cela facilite tout assembler à la fois sans avoir à le faire comme ceci:

 --bg_1_url: url ();
--bg_1_size: 100px;
--BG_1_REPEAT: No-Repeat;
/* etc. */

Il sera plus facile de mettre toutes les propriétés en abréviation et de les utiliser au besoin:

 corps {  
  ---BG_1: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg) Top 10px gauche 10px / 86px non répété;
  ---BG_2: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg) Top 10px à droite 10px / 86px non-répétition;
  ---BG_3: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg) en bas 10px à droite 10px / 86px non répété;
  ---BG_4: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg) en bas 10px gauche 10px / 86px non répété;

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

C'est ça.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!