Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So legen Sie die Hintergrundtransparenz in CSS fest

coldplay.xixi
Freigeben: 2023-01-03 09:29:54
Original
8679 Leute haben es durchsucht

So legen Sie die Hintergrundtransparenz in CSS fest: Erstellen Sie zunächst eine neue Datei und schreiben Sie den entsprechenden Stil in das Div. Fügen Sie dann einen Deckkraftstil zum Div hinzu. Der Transparenzeffekt wird erreicht und das Hintergrundbild des übergeordneten Divs kann projiziert werden.

So legen Sie die Hintergrundtransparenz in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So legen Sie einen transparenten Hintergrund in CSS fest:

1. Das Testen von HTML ist nur zwei ineinander verschachtelte Codes.

So legen Sie die Hintergrundtransparenz in CSS fest

2. Schreiben Sie dann entsprechende Stile für die beiden Divs, wie im Bild gezeigt, bei denen es sich um einige relativ einfache CSS-Codes handelt. Um den Transparenzeffekt anzuzeigen, haben wir dem Div ein Hintergrundbild mit dem Stil p1 hinzugefügt.

So legen Sie die Hintergrundtransparenz in CSS fest

3. Schauen Sie sich zunächst die Seite an, die keinen Transparenzeffekt hinzugefügt hat.

So legen Sie die Hintergrundtransparenz in CSS fest

4. Um einen transparenten Effekt hinzuzufügen, können wir dem Div einen Opazitätsstil hinzufügen. Der Code ist wie in der Abbildung gezeigt zum p2 div hinzugefügt

So legen Sie die Hintergrundtransparenz in CSS fest

5. Schauen Sie sich die Seite mit dem Transparenzeffekt-Set an.

Der Transparenzeffekt wird realisiert und das Hintergrundbild des übergeordneten Divs kann projiziert werden. Aber es gibt einen Fehler, das heißt, der Text auf dem Div wird unscharf, weil es auch einen Transparenzeffekt gibt.

So legen Sie die Hintergrundtransparenz in CSS fest

Verwandte Lernempfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Hintergrundtransparenz in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage