html Gibt es einen Vordergrund, der dem Hintergrundbild in CSS entspricht?
css background color (2)
Ich möchte einem Element auf der Webseite etwas Glanz verleihen. Ich würde es vorziehen, wenn ich der Seite kein zusätzliches HTML hinzufügen muss. Ich möchte, dass das Bild vor dem Element und nicht hinter dem Element angezeigt wird. Was ist der beste Weg, dies zu tun?
https://ffff65535.com
Sie können diese CSS verwenden
#yourImage
{
z-index: 1;
}HINWEIS
Legen Sie den z-index , dass er den z-index des Elements, über das Sie das Bild setzen, größer darstellt.
Wenn Sie keinen z-index angegeben haben, würde 1 die Arbeit erledigen.
Sie können den z-index auf -1 , in diesem Fall wäre das Bild immer im background !
Um ein "Vordergrundbild" ohne zusätzlichen HTML-Code zu erhalten, können Sie ein Pseudo-Element ( ::before / :before ) und die CSS- pointer-events . Die letzte Eigenschaft wird benötigt, damit der Benutzer tatsächlich durch die Ebene "klicken kann, als ob sie nicht existierte".
Hier ist ein Beispiel (mit einer Farbe, deren Alpha-Kanal 50% ist, so dass Sie sehen können, dass die echten Elemente tatsächlich fokussiert werden können): http://jsfiddle.net/JxNdT/
<div id="cont">
Test<br>
<input type="text" placeholder="edit">
</div>#cont {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#cont:before {
position: absolute;
content: '';
background: rgba(0,0,0, 0.5); /*partially transparent image*/
width: 200px;
height: 200px;
pointer-events: none;
}
PS. Ich habe das ::before Pseudo-Element gewählt, weil das natürlich zur korrekten Positionierung führt. Wenn ich ::after auswähle, dann muss ich position:relative; hinzufügen position:relative; zum echten Element ( #cont ) und top:0;left:0; zum Pseudo-Element ( ::after ).
PPS. Um den Vordergrundeffekt für Elemente ohne feste Größe zu erhalten , wird ein zusätzliches Element benötigt. Dieses Wrapper-Element benötigt die position:relative;display:inline-block; Stile. Legen Sie die width und height des Pseudoelements auf 100% , und das Pseudoelement wird auf die Breite und Höhe des Wrapperelements ausgerichtet. Demo: http://jsfiddle.net/JxNdT/1/ .
