Me encontré con este ejemplo en la imagen siguiente que se realiza en Flash y me preguntaba si un efecto similar de tener un cuadro transparente en la parte inferior de una imagen con texto es posible con CSS o algo que no sea flash?Puede superponer un div transparente en una imagen
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
Claro, aquí es una forma multi-navegador de hacerlo:
<html>
<head>
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
height: 16px;
line-height: 16px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
</head>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<img src="image.jpg" alt="Something" />
<div class="blackbg"></div>
<div class="label">Label Goes Here</div>
</div>
</body>
</html>
Este método no requiere JavaScript, no causa perder el texto ClearType en IE, y es compatible con Firefox, Safari, Opera, IE6,7,8 ... Lamentablemente, solo funciona para una línea de texto. Si desea varias líneas, ajuste la propiedad div.imageSub divheight y line-height, o use lo siguiente (modificaciones al CSS y requiere que la etiqueta se especifique dos veces).
<html>
<head>
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
</head>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<img src="image.jpg" alt="Something" />
<div class="blackbg">Label Goes Here</div>
<div class="label">Label Goes Here</div>
</div>
</body>
</html>
Definitivamente.
<div style="background-image: url(image.png);" >
<div style="position:relative; top:20px; left:20px;">
Some text here
</div>
</div>
<html>
<body>
<div style="position: absolute; border: solid 1px red">
<img src="http://www.ajaxline.com/files/imgloop.png"/>
<div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/>
<div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;">
Hello
</div>
</div>
</body>
</html>
Esto es increíble gracias tanto! – JasonDavis
cuando ejecuto el complemento YSlow de Firefox, me doy cuenta de que una de las cosas que menciona como un mal uso son las expresiones de CSS, ¿no se considera una de esas correctas? – JasonDavis
** @ jasondavis: ** 'filter' y' -ms-filter' es uno de ellos, pero no tiene la opción de IE. Y recuerda, ** YSlow ** no es la ley. –