(Lernvideo-Sharing: CSS-Video-Tutorial)
Während der Entwicklung stoßen wir manchmal auf Projekte, bei denen eine Farbmaske zur Hintergrundebene hinzugefügt werden muss. Jetzt werden wir die Methode zum Hinzufügen einer Farbmaske zur Hintergrundebene speziell zusammenfassen .
Methode 1: Überlagerung durch Positionierung (auf die Ebene achten)
<div class="wrap1">
<div class="inner"> </div>
</div>
.wrap1 {
position: relative;
width: 1200px;
height: 400px;
background: rgba(0, 0, 0, .5);
}
.wrap1 .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
z-index: -1;
}Methode 2: Überlagerung durch Pseudoklassenelemente
<div class="wrap2"></div>
.wrap2 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
}
.wrap2::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 2;
}Methode 3: CSS3-Farbüberlagerung Hintergrund-Mischmodus: multiplizieren;(Hauptvideostapel unten)
<div class="wrap3"></div>
.wrap3 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
}Erweiterung: Hintergrundunschärfe und Farbüberlagerung
.wrap4 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
filter: blur(2px);
overflow: hidden;
}Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !
Das obige ist der detaillierte Inhalt vonSo fügen Sie in CSS3 eine Farbmaske zur Hintergrundebene hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
