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;}
Werfen wir einen Blick auf die Stileinstellungen der beiden abgerundeten Ecken der beiden QQ-Emoticons. 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.