Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)-CSS-Tutorial-php.cn

Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)

易达

Freigeben： 2020-06-06 17:25:18

Original

4484 Leute haben es durchsucht

Ziele dieses Artikels:

1. Beherrschen Sie 3 Implementierungen des Hintergrundzuschneidens von Hintergrundclips

Problem:

Erforderlich, um die folgenden Effekte mit reinem DIV+ zu erzielen CSS, Hintergrundclip muss verwendet werden

Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)

Zusätzliche Anweisungen:

1 Die Breite des Fotorahmens beträgt 500 Pixel 20px und der Textabstand im Inneren beträgt 20. Die Größe des Rahmens beträgt 20px

2. Das Bild im Inneren wird als Hintergrundbild des Div verwendet

Jetzt führen wir die spezifische Operation aus

1. Bereiten Sie die Materialien vor: Erstellen Sie den Stammverzeichnis-Bilderordner und speichern Sie relevante Materialbilder hier 2. Erstellen Sie index.html und schreiben Sie die Struktur. Analyse

Ideenanalyse: Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)

1. Das Ziel ist tatsächlich in einen oberen und einen unteren Teil unterteilt Zeigt das gleiche Foto an. Solange das erste Foto wie erforderlich fertiggestellt ist, können die anderen kopiert werden

2. Wenn Sie jedoch genau hinsehen, ist die Anzeige jedes Fotos immer noch unterschiedlich Das zweite Foto wird tatsächlich auf der Grundlage des ersten Fotos zugeschnitten, die Zuschnittgröße entspricht genau der Größe des Randes, was dem Zuschneiden des Randes entspricht, und das dritte Foto wird auf der Grundlage des zweiten Fotos zugeschnitten, und die Zuschnittgröße entspricht genau der Größe des Randes Die Größe der Polsterung im Inneren, das heißt, das dritte Bild hat die anderen Teile als den Inhalt entfernt, einschließlich des Polsterteils und des Randes

3. Ein Teil ist ein Blockelement div, mit ein Titel, dann ein Rahmen und eine Polsterung, es gibt eine Inhaltszeichenfolge und schließlich ein Hintergrundbild

Laut der Analyse erhalten wir den folgenden Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景裁切案例演示</title>
</head>

<body>
    <div class="container">
        <!-- 裁切效果一 -->
        <h4>裁切效果一</h4>
        <div class="photo  clip1">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4>裁切效果二</h4>
        <div class="photo  clip2">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4>裁切效果三</h4>
        <div class="photo  clip3">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
    </div>
</body>
</html>

Nach dem Login kopieren

3. Schreiben Erstellen Sie den Stil, erstellen Sie einen CSS-Ordner und erstellen Sie darin einen neuen Index. So schreiben Sie die Stile darin. Das Folgende ist die Analyseidee

Denken Sie an die Analyse:

1. .container *

Think-Analyse

1. Um die gemeinsamen Stile aller Elemente im Container festzulegen, können wir diese gemeinsamen Codes in den .container *-Stil

schreiben

, also fügen Sie den folgenden Code zu index.css hinzu:

.container *{
    padding:0;
    margin:0;
}

Nach dem Login kopieren

2 .photo photo

Ideenanalyse

1 20px und die gepunktete Linie wird angezeigt: Randbreite: 20px; Randstil: gestrichelt; Abstand: 20px, Schriftstärke: fett, Farbe ist weiß: #fff;

Die Gesamtbreite beträgt 500, also Breite=500-(2 Ränder 20+20 +2 Polsterung20+20)=420, die Höhe beträgt ebenfalls 420, also Breite: 420, Höhe: 420

2. Weil der Rand dieses Fotos dunkelrot ist, Randfarbe: indianred; und dann der Hintergrund. Es ist ein Foto einer schönen Frau, und am Effekt können Sie die Farbe zwischen den gepunkteten Linien erkennen ist grau, also #ccc, also background:#ccc url(../images/Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)) no-repeat;

Das Wichtigste ist, dass sein Hintergrundbild am Rand beginnt, also background-origin: border -box; Es ist nur so, dass der Zuschneidepunkt jedes Fotos unterschiedlich ist, aber hier können wir die gemeinsamen Attribute der Fotos definieren

also Fügen Sie den folgenden Code zu index.css hinzu:

.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style:dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
    background:#ccc url(../images/Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)) no-repeat; 
    border-color: indianred;
    background-origin: border-box;
}

Nach dem Login kopieren

3. 3 verschiedene Schneidemethoden

1. Die erste Schneidemethode besteht darin, den Rand als Ausgangspunkt zum Schneiden der Randteile zu verwenden, also Hintergrundclip: Randbox;

2. Die zweite Schneidemethode besteht darin, Polsterung als Ausgangspunkt für das Schneiden anderer Teile als Polsterung zu verwenden, also Hintergrundclip: Polsterungsbox;

Die Die dritte Schnittmethode besteht darin, den Inhalt als Ausgangspunkt zu verwenden, um den Teil außerhalb des Inhalts auszuschneiden, also background-clip: content-box;

Fügen Sie also index.css hinzu. Der Code lautet wie folgt:

.clip1{
    background-clip: border-box;
}
.clip2{
    background-clip: padding-box;
}
.clip3{
    background-clip: content-box;
}

Nach dem Login kopieren

Bisher lautet der gesamte Inhalt von index.css wie folgt:

.container *{
    padding:0;
    margin:0;
}
.photo {
    width:420px; 
    height: 420px;
    border-width:20px;
    border-style:dashed;
    padding:20px; 
    font-weight:bold; 
    color:#fff; 
    background:#ccc url(../images/Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)) no-repeat; 
    border-color: indianred;
    background-origin: border-box;
}

.clip1{
    background-clip: border-box;
}
.clip2{
    background-clip: padding-box;
}
.clip3{
    background-clip: content-box;
}

Nach dem Login kopieren

Führen Sie dann index.css in index.html ein

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景裁切案例演示</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div class="container">
        <!-- 裁切效果一 -->
        <h4>裁切效果一</h4>
        <div class="photo  clip1">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4>裁切效果二</h4>
        <div class="photo  clip2">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
        <h4>裁切效果三</h4>
        <div class="photo  clip3">
            <div class="content">周慧敏，微微一笑，很倾城</div>
        </div>
    </div>
</body>
</html>

Nach dem Login kopieren

Die laufenden Ergebnisse lauten wie folgt:

Bisher haben wir alle Anforderungen erfüllt

Zusammenfassung:

1. Wir haben 3 Arten von Hintergrundbeschneidungsmethoden gelernt, das Syntaxformat ist Hintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel)

background-clip: border-box |. content-box | -box: bedeutet, dass die Polsterung als Ausgangspunkt genommen wird und der Teil außerhalb der Polsterung abgeschnitten wird

content-box: bedeutet, dass der Inhalt als Ausgangspunkt genommen wird und der Teil außerhalb des Inhalts abgeschnitten wird

Das obige ist der detaillierte Inhalt vonHintergrundclip in CSS3 implementiert drei Effekte des Bildzuschneidens (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!