J'ai couru à travers cet exemple dans l'image ci-dessous qui est fait en Flash et je me demandais si un effet similaire d'avoir une boîte transparente au bas d'une image avec du texte dessus est possible avec CSS ou autre chose que flash?Pouvez-vous superposer un div transparent sur une image
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
Bien sûr, voici un moyen cross-browser 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 JavaScript, ne cause pas perdre du texte ClearType dans IE, et est compatible avec Firefox, Safari, Opera, IE6,7,8 ... Malheureusement, cela ne fonctionne que pour une ligne de texte. Si vous souhaitez plusieurs lignes, modifiez la propriété height et la propriété deou utilisez les éléments suivants (modifications apportées à la feuille de style CSS et nécessite que l'étiquette soit 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>
Certainement.
<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>
C'est incroyable merci beaucoup! – JasonDavis
lors de l'exécution YSlow firefox plugin je remarque 1 des choses qu'il mentionne être une mauvaise utilisation est des expressions CSS, ce n'est pas considéré comme l'un de ceux corrects? – JasonDavis
** @ jasondavis: ** 'filter' et' -ms-filter' en fait partie, mais vous n'avez pas le choix pour IE. Et rappelez-vous, ** YSlow ** n'est pas la loi. –