Background-clip en CSS3 implémente trois effets de recadrage d'image (exemple de code)

Objectifs de cet article :

1. Maîtriser 3 implémentations du recadrage d'arrière-plan de clips d'arrière-plan

Problème :

Requis pour obtenir les effets suivants, en utilisant du DIV+ pur CSS, Background-clip doit être utilisé

Instructions supplémentaires :

1 La largeur du cadre photo est de 500 px et la hauteur est de 500 px. 20px et le remplissage du texte à l'intérieur est de 20. La taille de la bordure est de 20px

2 L'image à l'intérieur est utilisée comme image d'arrière-plan du div

Faisons maintenant l'opération spécifique

1. Préparez les matériaux : créez le dossier d'images du répertoire racine, stockez les images de matériaux pertinentes ici. Les matériaux incluent

. 2. Créez index.html et écrivez la structure. Comment est la structure ? Analyse

Analyse de l'idée :

1. L'objectif est divisé en parties supérieure et inférieure en fait. affiche la même photo, donc tant que la première photo est complétée comme requis, les autres peuvent être copiées

2. Cependant, si vous regardez attentivement, l'affichage de chaque photo est toujours différent. la deuxième photo est en fait recadrée en fonction de la première photo, la taille recadrée est exactement la taille de la bordure, ce qui équivaut à recadrer la bordure, et la troisième photo est recadrée en fonction de la deuxième photo, et la taille recadrée est exactement. la taille du rembourrage à l'intérieur. , c'est-à-dire que la troisième image a supprimé les parties autres que le contenu, qui inclut la partie rembourrage et la bordure

3. Une partie est un élément de bloc div, avec un titre, puis une bordure et un padding , il y a une chaîne de contenu, et enfin une image de fond

Selon l'analyse, on obtient le code suivant

3. Écrivez le style, créez un dossier CSS et créez-y un nouvel index CSS, comment y écrire les styles, voici l'idée d'analyse

Pensez à l'analyse :

1. .container *

Penser l'analyse

1. Afin de définir les styles communs de tous les éléments du conteneur, nous pouvons écrire ces codes communs dans le style .container *

, ajoutez donc le code suivant à index.css :

2 .photo photo

Analyse de l'idée

1 Selon les exigences, la frontière est. 20px et la ligne pointillée est affichée. Le code converti est border-width : 20px ; border-style : dashed ; le texte à l'intérieur est : Espacement, donc remplissage : 20px, font-weight : bold, la couleur est blanche : #fff ;

La largeur totale est de 500, donc largeur=500-(2 bordures 20+20 +2 padding20+20)=420, la hauteur est également de 420, donc largeur : 420, hauteur : 420

2. Parce que la bordure de cette photo est rouge foncé, couleur de la bordure : rouge indien ; puis l'arrière-plan. C'est une photo d'une belle femme, et d'après l'effet, vous pouvez voir la couleur entre les lignes pointillées. est gris, ce qui est #ccc, donc background:#ccc url(../images/Background-clip en CSS3 implémente trois effets de recadrage dimage (exemple de code)) no-repeat

La chose la plus importante est que son image d'arrière-plan commence à partir de la bordure, donc background-origin: border; -box; C'est juste que le point de recadrage de chaque photo est différent, mais ici on peut définir ici les attributs communs des photos

donc Ajoutez le code suivant à index.css :

3. 3 méthodes de découpe différentes

1. La première méthode de découpe consiste à utiliser la bordure comme point de départ pour couper les parties de bordure autres que le rembourrage, donc background-clip: border-box;<. 🎜>

2. La deuxième méthode de découpe consiste à utiliser le rembourrage comme point de départ pour couper des parties autres que le rembourrage, donc background-clip: padding- box;

3. la troisième méthode de découpe consiste à utiliser le contenu comme point de départ pour couper la partie en dehors du contenu, donc background-clip: content-box;

Ajoutez donc index.css Le code est le suivant :

Jusqu'à présent, tout le contenu de index.css est le suivant :

Ensuite, introduisez index.css dans index.html

Les résultats d'exécution sont les suivants :

Jusqu'à présent, nous avons répondu à tous les besoins

Résumé :

1 J'ai appris 3 types de méthodes de recadrage d'arrière-plan, le format de syntaxe est

<.>background-clip: border-box | padding-box | content-box | no-clip

border-box : signifie partir de la bordure et couper à l'extérieur de la bordure La partie

padding -box : signifie prendre le remplissage comme point de départ, couper la partie à l'extérieur du remplissage

content-box : prendre le contenu comme point de départ, couper la partie à l'extérieur du contenu

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!