Heim  >  Artikel  >  Web-Frontend  >  So machen Sie ein Hintergrundbild mit CSS transparent

So machen Sie ein Hintergrundbild mit CSS transparent

不言
不言Original
2018-11-28 11:10:344414Durchsuche

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.

So machen Sie ein Hintergrundbild mit CSS transparent

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:

So machen Sie ein Hintergrundbild mit CSS transparent

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:

So machen Sie ein Hintergrundbild mit CSS transparent

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:

So machen Sie ein Hintergrundbild mit CSS transparent


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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn