Maison >interface Web >tutoriel CSS >Partage de code CSS pour réaliser une image d'arrière-plan translucide et un contenu opaque
Partage de code CSS pour réaliser une image d'arrière-plan translucide et un contenu opaque
- 小云云original
- 2018-03-14 09:43:125111parcourir
Cet article vous présente principalement la méthode pour rendre l'image d'arrière-plan translucide et opaque avec du CSS pur. Je pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.
J'ai récemment créé une interface de connexion, et j'ai soudain eu envie d'utiliser cet effet d'image de fond transparente et de contenu opaque. Ici, je vais parler de mes deux idées.
Affichage d'effet
Translucide
Opaque
Pratiques courantes échouées
La méthode la plus courante consiste à définir l'opacité de l'élément. L'effet de ce paramètre est que le contenu et l'arrière-plan sont translucides, ce qui affecte sérieusement le visuel. effet.
Une autre option consiste à définir background-color:rgba(). Cette méthode ne peut définir que la transparence de la couleur d'arrière-plan.
Posture correcte
Je pense à deux méthodes, la première est d'utiliser un pseudo-élément ::avant, nous ajoutons un arrière-plan au pseudo-élément et définissons le pseudo-élément Utilisez la transparence d'arrière-plan des pseudo-éléments pour obtenir
<!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>Il existe une autre méthode similaire aux pseudo-éléments. Nous pouvons définir un p déraisonnable, et le. p inside placera le contenu et le parent p Définir l'arrière-plan, puis y définir la transparence. La disposition approximative est la suivante :
<p class="bg">
<p class="content">
一些内容
</p>
</p>Cela peut également être réalisé. le même effet.
Recommandations associées :
Opacité CSS - code pour réaliser l'effet translucide des images_Échange d'expériences
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!