Gibt es eine Möglichkeit, diesen Effekt browserübergreifend zu erreichen, ohne dass separate Bilder erstellt werden müssen?Weiße Deckkraft erzielen in HTML/CSS
Grundsätzlich hat der Rahmen, auf dem Text liegt, eine weiße Überlagerung von 50% Opazität. Ich möchte eine Lösung, die kein anderes Bild neben dem Hintergrund erstellt, aber ich weiß nicht, ob es möglich ist!
Try RGBA, z.B.
div { background-color: rgba(255, 255, 255, 0.5); }
Wie immer wird dies nicht in jedem einzelnen jemals geschriebenen Browser funktionieren.
funktioniert, aber es ist nicht kompatibel mit IE, also musste ich ein Hintergrundbild von 1 Pixel mit 50% Alpha verwenden. Danke trotzdem :) – Jack
Wenn Sie rgba aufgrund der Browserunterstützung nicht verwenden können und kein halbtransparentes weißes PNG enthalten möchten, müssen Sie zwei positionierte Elemente erstellen. Eine für die weiße Box mit Deckkraft und eine für den überlagerten Text, fest.
body { background: red; }
.box { position: relative; z-index: 1; }
.box .back {
position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }
body.browser-ie8 .box .back { filter: alpha(opacity=75); }<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
<div class="box">
<div class="back"></div>
<div class="text">
Lorem ipsum dolor sit amet blah blah boogley woogley oo.
</div>
</div>
</body>
möglich Duplikat von [CSS: Styling besuchte Bilder Browser Weg/Cross-Browser-Opazität Kreuz] (http://stackoverflow.com/questions/1438671/css-styling-visited-images-cross-browser -way-cross-browser-opacity) –
Siehe die Betrogene. Sie müssen den schwarzen Text in einen separaten DIV unter –
setzen, aber beachten Sie, dass Filter für IE6 wirklich Resource-Suckers sind (was eine IE6-Workstation wahrscheinlich nicht zu viel übrig hat). – Hannes