Im vorherigen Artikel haben wir ein Bild mit einem Auf- und Abwärtsverlauf als Hintergrund des Titels verwendet und darauf einen Effekt mit abgerundeten Ecken angewendet. Stimmt es, dass ein solcher Rahmen mit abgerundeten Ecken nur für relativ eintönige Bilder verwendet werden kann? Können wir einige Bilder mit satten Farben auch transparent und abgerundet machen?
Die Antwort lautet: Ja, werfen wir einen Blick auf das ultimative Kung-Fu.
Werfen wir zunächst einen Blick auf die endgültigen Renderings :
Sie sehen, dies ist ein abgerundetes Bild, das mit reinem CSS erstellt wurde. Um den Transparenzeffekt zu sehen, können Sie dieses Modell auf Ihren Computer herunterladen und die Größe des Fensters nach Ihren Wünschen ändern transparent.
Mit diesem Effekt müssen Sie sich nicht mehr darum kümmern, die Ecken jedes Bildes abzurunden. Dieser Effekt ist häufig auf einigen bildbasierten Demoseiten zu sehen und eignet sich besonders für Listen mit vielen Bildern. Wie wäre es damit, der Effekt ist nicht schlecht!
Okay, werfen wir einen Blick auf den Implementierungsmechanismus!
Umsetzungsprinzip:
Dieser Effekt ist eigentlich die Variante, die ich in Kapitel 2 implementiert habe. Lassen Sie uns über die wichtigsten Tastencodes sprechen.
Die wichtigste Änderung ist die Positionierung des Hintergrundbilds, dieses Mal unterscheidet sie sich jedoch ein wenig von der in Kapitel 2. Diesmal müssen Sie die Änderungen in den beiden abgerundeten Ecken unten berücksichtigen.
Schauen wir uns zunächst die Implementierung der beiden oben genannten abgerundeten Ecken an:
/*Bildversatzpositionierung – der obere Teil*/
.sharp b.b2{background-position:-4px top;}
.sharp b.b3{Hintergrundposition:-2px -1px;}
.sharp b.b4{Hintergrundposition:-1px -2px;}
Schauen Sie sich die Stileinstellungen der beiden abgerundeten Ecken unten an. Der untere Teil und der obere Teil entsprechen einander.
/*Bild-Offset-Positionierung – unterer Teil*/
.sharp b.b7{background-position:-4px unten;}
.sharp b.b6{background-position:-2px unten;}
.sharp b.b5{background-position:-1px unten;}
Verschiedene Bildaufrufstile:
/*Farbschema eins, grüner Stil------------*/
/*Rahmenfarbe*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{Hintergrund:#262626;}
/*Bildpfad*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) Nr -wiederholen;}
Die ersten beiden Sätze bilden zusammen den Farbwert des Rahmenfelds, der auf den gleichen Farbwert eingestellt werden muss. Der folgende Satz legt den Aufrufpfad des Bildes fest.
Nur drei Sätze, um ein Farbschema zu erhalten.