¿hay alguna manera de lograr este efecto de forma compatible con varios navegadores sin tener que preparar imágenes separadas?Alcanzar el efecto de opacidad blanco en html/css
Básicamente, el marco en el que se coloca el texto tiene una capa blanca de 50% de opacidad .. Me gustaría una solución que no implique crear ninguna otra imagen además del fondo pero no sé si es posible.
RGBA intento, por ejemplo,
div { background-color: rgba(255, 255, 255, 0.5); }
Como siempre, esto no funcionará en todos y cada uno de los navegadores que se hayan escrito.
funciona pero no es compatible con IE, así que tuve que usar una imagen de fondo de 1 píxel con un 50% de alfa. Gracias de cualquier manera :) – Jack
Si no puede usar rgba debido a la compatibilidad del navegador, y no desea incluir un PNG blanco semitransparente, tendrá que crear dos elementos posicionados. Uno para la caja blanca, con opacidad, y otro para el texto superpuesto, sólido.
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>
posible duplicado de [CSS: El labrar visitó imágenes cruzan manera explorador/navegador cruz opacidad] (http://stackoverflow.com/questions/1438671/css-styling-visited-images-cross-browser -way-cross-browser-opacity) –
Ver el engaño. Tendrás que poner el texto negro en un DIV por separado a través del –
, pero ten en cuenta que los filtros para IE6 son realmente extractores de recursos (que una estación de trabajo IE6 probablemente no tiene mucho de sobra). – Hannes