J'ai parcouru cet exemple dans l'image ci-dessous qui est faite en Flash et je me demandais si un effet similaire consistant à avoir un cadre transparent au bas d'une image avec du texte dessus est possible avec CSS ou quelque chose d'autre que le flash?
Bien sûr, ici, est une croix-navigateur façon de le faire:
<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>
Cette méthode ne nécessite pas de JavaScript, ne cause pas perdre le texte ClearType dans IE, et est compatible avec Firefox, Safari, Opera, IE6,7,8... Malheureusement, il ne fonctionne que pour une ligne de texte. Si vous souhaitez que plusieurs lignes, soit d'ajuster div.imageSub divs' height et line-height de la propriété, ou utilisez la commande suivante (les modifications du CSS et exige l'étiquette pour être spécifiée deux fois).
<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>
<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>
Le code CSS suivant superposera une div transparente sur une image
.trPic{
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.trPic .redO{
position:relative;
top:0px;
width:320px;
height:240px;
background:#FF2400;
opacity:0;
}
.trPic:hover .redO
{
opacity:0.7;
}
Code source complet .... Techniques de superposition CSS
Algor
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
