CSS-Code-Sharing, um durchscheinende Hintergrundbilder und undurchsichtige Inhalte zu realisieren-CSS-Tutorial-php.cn

CSS-Code-Sharing, um durchscheinende Hintergrundbilder und undurchsichtige Inhalte zu realisieren

小云云

Freigeben： 2018-03-14 09:43:12

Original

5097 Leute haben es durchsucht

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[&#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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Dies kann auch erreicht werden der gleiche Effekt.

Verwandte Empfehlungen:

Verwenden Sie Js- oder CSS-Filter, um den durchscheinenden Effekt von PNG-Bildern in IE6 IE6PNG proper_html/css_WEB-ITnose zu erzielen

JS-Methode zur Realisierung des durchscheinenden Farbverlaufseffekts von Bildern mit neun Quadratgittern_Javascript-Fähigkeiten

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!