Ich lief über dieses Beispiel in dem Bild unten, das ist in Flash getan und ich frage mich, ob eine ähnliche Wirkung einer transparenten Box am unteren Rand eines Bildes mit Text auf möglich mit CSS oder etwas anderes dann flash?Kannst du ein transparentes div auf ein Bild überlagern
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
Sicher, hier ist eine Browser-Art und Weise, dies zu tun:
<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>
Diese Methode JavaScript nicht erforderlich ist, verursachen keine Cleartype-Text in IE zu verlieren, und ist kompatibel mit Firefox, Safari, Opera, IE6,7,8 ... Leider funktioniert es nur für eine Textzeile. Wenn Sie mehrere Zeilen möchten, passen Sie entweder div.imageSub div 's height und line-height -Eigenschaft, oder verwenden Sie Folgendes (Änderungen an der CSS und erfordert die Angabe der Bezeichnung zweimal).
<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>
Auf jeden Fall.
<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>
Dies ist erstaunlich, vielen Dank! – JasonDavis
beim Ausführen von YSlow Firefox-Plugin Ich bemerke eines der Dinge, die erwähnt werden, dass es eine schlechte Verwendung ist, ist CSS Expressions, das wird nicht als eines der richtigen betrachtet? – JasonDavis
** @ jasondavis: ** 'filter' und' -ms-filter' ist einer von ihnen, aber Sie haben nicht die Wahl für IE. Und vergiss nicht, ** YSlow ** ist nicht das Gesetz. –