Partage de code CSS pour réaliser une image d'arrière-plan translucide et un contenu opaque-tutoriel CSS-php.cn

Partage de code CSS pour réaliser une image d'arrière-plan translucide et un contenu opaque

小云云

Libérer： 2018-03-14 09:43:12

original

5073 Les gens l'ont consulté

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[&#39;PHP_SELF&#39;] ?> 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>

Copier après la connexion

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>

Copier après la connexion

Cela peut également être réalisé. le même effet.

Recommandations associées :

Utilisez des filtres Js ou CSS pour obtenir l'effet translucide des images PNG dans IE6 IE6PNG proper_html/css_WEB-ITnose

Méthode JS pour réaliser l'effet de dégradé translucide d'une grille à neuf carrés compétences en images_javascript

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!