Dies ist nicht die scheinbar übliche Frage, wie man Text über ein Hintergrundbild legt.Hintergrundbild über Text setzen?
Ich habe ein Hintergrundbild, das ich als Overlay arbeiten möchte - es sollte über den Text sein. Der Einfachheit halber wird ein anderes div über das existierende div gesetzt und das Hintergrundbild ist viel schwieriger.
Kann ein Hintergrundbild über dem Text liegen?
Dies ist definitiv nicht möglich ist, und das zu Recht. Es wäre falsch (und verwirrend), wenn Sie die Hintergrund Eigenschaft eines Elements für etwas anderes als den Hintergrund verwenden könnten.
Der richtige Weg, dies zu tun ist mit einem absolut positionierten div (mit Breite und Höhe auf 100%) innerhalb des Behälters neben dem Text: http://jsfiddle.net/EvqNb/
Nun, ich denke nicht, wenn es möglich ist. Für komplizierte Designs sollten komplizierte Ansätze verwendet werden. Es ist nicht möglich, MSNs erste Seite in nur einem div zu machen. Wie auch immer, als Workaround können Sie color Eigenschaft dieses div auf transparent setzen, macht es den Text unsichtbar, aber es ist da vor dem Hintergrund.
Wie wäre es so etwas wie
<div class="container" style="position:relative;width:100px;height:100px;">
<p>Test to hide</p>
<div class="overlay" style="position:absolute;z-index:999;background:url(yourimage.jpg); width:100px;height:100px;"></div>
</div>
Wenn ich, klar die Frage verstanden denke ich {text-indent: -9999px;} würde Hilfe.
Ich löste dieses Problem ziemlich einfach, indem ich den Text transparent machte und den Anzeigemodus auf inline-block einstellte. Beachten Sie, dass Sie die genaue Größe Ihres Bildes wissen müssen, wenn Sie genau Ihr Bild angezeigt werden soll:
<html>
<head>
<style>
#mydiv {
width: 50px; /* The width of your image in pixels. */
height: 50px; /* The height of your image in pixels. */
display: inline-block; /* The inside needs to be a block to set it's size.
If positioned, it could be block as well. */
color: transparent; /* Ensures we don't see the text. */
background: url('logo.png'); /* The actual image we want to use. */
overflow: hidden; /* Ensures that any text will not spill out of our box. */
}
</style>
</head>
<body>
<div id="mydiv">Example.com</div>
</body>
</html>
Hallo Deividas, nicht den Text zu verbergen versuchen. Das Hintergrundbild hatte Transparenz, wollte aber den Text nicht auswählen, wenn ich mich richtig erinnere. –