background-clip et background-origin sont de nouvelles propriétés de module d'arrière-plan ajoutées dans CSS3, utilisées pour déterminer le positionnement de l'arrière-plan.
background-clip est utilisé pour déterminer si l'arrière-plan contient la zone de bordure. Et background-origin est utilisé pour déterminer la position de référence pour le calcul de la position d'arrière-plan.
La syntaxe est :
background-clip : [bordure | remplissage] [, [bordure | remplissage]]* |
Pour le clip d'arrière-plan :
S'il s'agit d'une valeur de remplissage, l'arrière-plan ignore les bords du remplissage et la bordure est transparente. S'il s'agit d'une valeur de bordure, l'arrière-plan inclut la zone de bordure. S'il existe plusieurs images d'image d'arrière-plan, les valeurs de clip d'arrière-plan correspondantes sont séparées par des virgules.
Pour l'origine en arrière-plan :
S'il s'agit d'une valeur de remplissage, la position est relative au bord de remplissage (« 0 0 » est le coin supérieur gauche du bord de remplissage et « 100 % 100 % » est le coin inférieur droit). S'il s'agit d'une valeur de bordure, cela signifie le bord relatif de la bordure. La valeur de la bordure est relative au bord du contenu. Comme background-clip, plusieurs valeurs sont séparées par des virgules. Si background-clip est la valeur de remplissage, background-origin est la valeur de bordure et background-position est "en haut à gauche" (valeur initiale par défaut), le coin supérieur gauche de l'image d'arrière-plan sera coupé.
Ces deux attributs n'apparaissent qu'à partir de CSS3. Qu'en est-il du comportement par défaut dans le module d'arrière-plan lorsque cet attribut n'est pas utilisé ?
| background-clip est par défaut quelque chose comme background-clip:border. background-origin est par défaut quelque chose comme background-origin:padding. |
Mais IE est un cas particulier (ça craint).
Dans IE6 et IE7, l'arrière-plan des éléments généraux (sauf les boutons, etc.) est équivalent à : background-clip:border; background-origin:border;
L'arrière-plan des éléments hasLayout (plus les boutons, etc.) est équivalent à : background-clip:padding ; background-origin:padding ;
Cette paire de propriétés CSS3 a été implémentée dans des navigateurs tels que Mozilla, Safari 3 et Konqueror, mais elles sont toutes exprimées via leurs propriétés privées.
Les attributs privés des navigateurs de base non IE commencent généralement par -xxx-, -o- est privé pour Opera avec Presto comme moteur, -icab- est privé pour iCab et -khtml- est le navigateur avec KHTML comme moteur. (comme Konqueror Safari), -moz- est un navigateur basé sur le moteur Gecko de Mozilla (comme Firefox, Mozilla), -webkit- est un navigateur (comme Safari, Swift) basé sur le moteur de rendu Webkit (un dérivé de KHTML ) .
Autrement dit, les attributs privés pris en charge sont :
| -moz-background-clip -webkit-background-clip -khtml-background-clip -moz-arrière-plan-origine -webkit-arrière-plan-origine -khtml-arrière-plan-origine |
Voici un exemple simple d'utilisation de l'attribut background-origin. L'effet est le suivant :
Code HTML :
Code CSS :
bouton { border:3px double #95071b;/*Utilisez une double bordure de 3px pour simuler la ligne blanche dans le dessin*/ couleur d'arrière-plan : #95071b ; /*Définir la méthode de recadrage de l'arrière-plan et les lignes de guidage*/ -moz-background-origin:padding; /*Compatibilité ascendante*/ couleur :#fff ; /*Correction d'un problème de hauteur sous IE6*/ |
Inconvénients : Cet effet ne peut pas être obtenu sous Opera. Bien sûr, ce n'est qu'une solution pour ceux qui sont obsédés par le code HTML (limitée à l'apprentissage et à la compréhension des attributs background-clip et background-origin). Bien sûr, vous pouvez également essayer d'autres méthodes, qui peuvent rendre le CSS plus concis. Quant aux avantages des différentes méthodes, c'est à vous de peser les inconvénients.