Dans l’article précédent, nous avons utilisé une image avec un dégradé de haut en bas comme arrière-plan du titre et lui avons appliqué un effet de coins arrondis. Est-il vrai que ce type de cadre aux coins arrondis ne peut être utilisé que pour des photos relativement monotones ? Peut-on également rendre certaines images aux couleurs riches, transparentes et arrondies ?
La réponse est oui, jetons un coup d’œil à son kung-fu ultime.
Voyons d'abord les rendus finaux :
Vous voyez, il s'agit d'une image arrondie réalisée avec du CSS pur. Afin de voir l'effet de transparence, j'ai spécialement appliqué une image d'arrière-plan. Vous pouvez télécharger ce modèle sur votre ordinateur et redimensionner la fenêtre à votre guise. transparent.
Avec cet effet, vous n'avez plus à vous soucier d'arrondir les coins de chaque image. Cet effet est souvent observé dans certaines pages de démonstration basées sur des images et convient particulièrement aux listes contenant beaucoup d'images. Qu'en est-il, l'effet n'est pas mauvais !
Bon, jetons un coup d'œil à son mécanisme de mise en œuvre !
Principe de mise en œuvre :
Cet effet est en fait la variante que j'ai implémentée au chapitre 2. Parlons des principaux codes clés.
Le principal changement est le positionnement de l'image d'arrière-plan, mais cette fois il est un peu différent de celui du chapitre 2. Cette fois, vous devez prendre en compte les changements dans les deux coins arrondis ci-dessous.
Regardons d’abord la mise en œuvre des deux coins arrondis ci-dessus :
/*Positionnement décalé de l'image -- la partie supérieure*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{position-arrière-plan :-2px -1px;}
.sharp b.b4{position-arrière-plan :-1px -2px;}
Regardez les paramètres de style des deux coins arrondis ci-dessous. La partie inférieure et la partie supérieure se correspondent.
/*Positionnement décalé de l'image - partie inférieure*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}
Différents styles d'appel d'images :
/*Schéma de couleurs 1, style vert----------------------------------------*/
/*Couleur de la bordure*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{fond :#262626;}
/*Chemin de l'image*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) non -répéter;}
Les deux premières phrases forment ensemble la valeur de couleur de la zone de bordure, qui doit être définie sur la même valeur de couleur. La phrase suivante définit le chemin d'appel de l'image.
Juste trois phrases pour obtenir une palette de couleurs.