So machen Sie ein Hintergrundbild mit CSS transparent

Das Attribut, das in CSS benötigt wird, um das Hintergrundbild transparent zu machen, ist das Opazitätsattribut. Wenn jedoch Text vorhanden ist, müssen wir die Elemente trennen, um zu verhindern, dass der Text transparent ist.

Die Eigenschaft in CSS, die das Hintergrundbild transparent macht, ist die Opazitätseigenschaft, aber wenn Sie sie verwenden, um Inhalte mit Text zu erstellen, werden Sie feststellen, dass der Text Auch der Inhalt wird transparent sein.

Jetzt schreiben wir ein CSS, das lediglich das Hintergrundbild transparent macht.

Werfen wir zunächst einen Blick auf den HTML-Code

<div class="content">
    <div class="bg"></div>
    <p>蒲公英</p>
</div>

.bg ist ein leeres Div mit der Aufschrift „Dandelion“.

Mit anderen Worten, das Positionsattribut wird verwendet, um den „Löwenzahn“ über dem Bild zu platzieren.

Geben Sie zunächst die relative Position an (Position: relativ;) zu .content.

Um die Hintergrundtransparenz besser verständlich zu machen, geben wir zunächst einen schwarzen Hintergrund

.content{
    width: 450px;
    height: 300px;
    background: #000;
    position: relative; /*相对位置*/
}
p{
    color: #fff;
    font-weight: bold;
    text-align: center;
}

Der Effekt ist wie folgt:

Als nächstes setzen wir die .bg

, um die Breite und Höhe auf 100 % zu setzen und die Position auf die absolute Position oben links zu setzen (links: 0; oben: 0; ).

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(img/pugongying.jpg);
    background-size: cover;
    opacity: 0.5;
}

Der Effekt ist wie folgt:

Tatsächlich befinden sich die Zeichen unter dem transparenten Bild.

Im Vergleich zum in absoluter Position fixierten Hintergrundbild muss der Inhalt von p also vorne liegen.

Daher kann p ihm auch eine Stapelreihenfolge geben, indem er position: absolute; angibt. (Da es als position: absolute; beschrieben wird, können Sie auch den Z-Index verwenden, um die Stapelreihenfolge zu manipulieren.)

Zuletzt verschieben wir den Text in die mittlere Position

p{
    width: 100%;
    height: 1.5em;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

Die Wirkung ist wie folgt:

Das obige ist der detaillierte Inhalt vonSo machen Sie ein Hintergrundbild mit CSS transparent. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!