Heim >Web-Frontend >CSS-Tutorial >CSS-Code-Sharing, um durchscheinende Hintergrundbilder und undurchsichtige Inhalte zu realisieren
CSS-Code-Sharing, um durchscheinende Hintergrundbilder und undurchsichtige Inhalte zu realisieren
- 小云云Original
- 2018-03-14 09:43:125111Durchsuche
Dieser Artikel stellt Ihnen hauptsächlich die Methode vor, das Hintergrundbild mit reinem CSS durchscheinend und undurchsichtig zu machen. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.
Ich habe kürzlich eine Anmeldeoberfläche erstellt und wollte plötzlich diesen Effekt von transparentem Hintergrundbild und undurchsichtigem Inhalt nutzen. Hier werde ich über meine beiden Ideen sprechen.
Effektanzeige
Transluzent
Undurchsichtig
Häufig fehlgeschlagene Vorgehensweisen
Die häufigste Methode besteht darin, die Deckkraft des Elements festzulegen. Diese Einstellung hat zur Folge, dass sowohl der Inhalt als auch der Hintergrund durchscheinend sind, was die Optik stark beeinträchtigt Wirkung.
Eine weitere Option besteht darin, background-color:rgba() festzulegen. Diese Methode kann nur die Transparenz der Hintergrundfarbe festlegen.
Korrekte Haltung
Ich denke an zwei Methoden: Die erste besteht darin, ein Pseudoelement zu verwenden::Vorher fügen wir dem Pseudoelement einen Hintergrund hinzu und legen das fest Pseudoelement Verwenden Sie die Hintergrundtransparenz von Pseudoelementen, um
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<style type="text/css">
body{
background-image:url(images/bird.jpg);
background-repeat: no-repeat;
background-size:100%;
}
.login_box::before{
content:"";
/*-webkit-filter: opacity(50%);
filter: opacity(50%); */
background-image:url(images/love.jpg);
opacity:0.5;//透明度设置
z-index:-1;
background-size:500px 300px;
width:500px;
height:300px;
position:absolute;
//一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层
top:0px;
left:0px;
border-radius:40px;
}
.login_box{
position:fixed;
left:50%;
top:200px;
width:500px;
height:300px;
margin-left:-250px;
border-radius:40px;
box-shadow: 10px 10px 5px #888;
border:1px solid #666;
text-align:center;
}
form{
display:inline-block;
margin-top:100px;
}
input{
display:block;
width:250px;
height:30px;
background-color: #888;
border:1px solid #fee;
outline:none;
border-radius:10px;
}
input[type="submit"]{
width:100px;
height:30x;
margin-left: 70px;
background-color: #ccc;
}
span{
color:red;
font-size:15px;
}
</style>
</head>
<body>
<p class="login_box">
<form action=<?php echo $_SERVER['PHP_SELF'] ?> method="post">
<input type="text" name="nickname">
<span><?php echo $nameERR; ?></span>
<br>
<input type="password" name="password">
<span><?php echo $passwordERR; ?></span>
<br>
<input type="submit" value="登陆">
</form>
</p>
</body>
</html>zu erreichen. Es gibt eine andere Methode, die Pseudoelementen ähnelt. Wir können ein unvernünftiges p festlegen p im Inneren platziert den Inhalt und das übergeordnete p. Legen Sie den Hintergrund fest und stellen Sie dann die Transparenz ein. Das ungefähre Layout lautet wie folgt:
<p class="bg">
<p class="content">
一些内容
</p>
</p>Dies kann auch erreicht werden der gleiche Effekt.
Verwandte Empfehlungen:
CSS-Deckkraft – Code zur Realisierung des durchscheinenden Effekts von Bildern_Erfahrungsaustausch
Das obige ist der detaillierte Inhalt vonCSS-Code-Sharing, um durchscheinende Hintergrundbilder und undurchsichtige Inhalte zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!