css - pero - ¿Puedes superponer un div transparente en una imagen?
imagen de fondo transparente html (4)
Claro, aquí hay una forma de hacerlo entre navegadores:
<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 la pérdida de texto ClearType en IE, y es compatible con Firefox, Safari, Opera, IE6,7,8 ... Desafortunadamente, solo funciona para una línea de texto. Si desea varias líneas, ajuste la height div.imageSub div y la propiedad de 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>
Me encontré con este ejemplo en la imagen de abajo que se hace 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 u otra cosa que no sea flash.
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
Seguro.
<div style="background-image: url(image.png);" >
<div style="position:relative; top:20px; left:20px;">
Some text here
</div>
</div>
Simplemente puede crear una superposición por CSS solo sobre cualquier imagen.
.container{ width:250px; height:250px; } .container img{width:100%;height:100%} .container::before{ content:''''; position:absolute; left:0; top:0; background:#fff; z-index:9999; width:100%; height:100%; opacity:0; }
<div class="container"> <img src="https://cdn4.buysellads.net/uu/1/8026/1535654409-Slack-pink_logo.png" alt="" border="0"> </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>