你可以覆盖一个图像透明的div
我在下面的图片中运行了这个例子，这是在Flash中完成的，我想知道是否有一个类似的影响，有一个透明的框在图像的底部与文本是可能的CSS或其他什么闪光？
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
当然，这是一个跨浏览器的方式：
<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> 这种方法不需要JavaScript，不会导致在IE中丢失ClearType文本，并且与Firefox，Safari，Opera，IE6,7,8兼容。不幸的是，它只能用于一行文本。 如果你想多行，可以调整div.imageSub div的height和line-height属性，或者使用下面的代码（对CSS的修改，并且要求标签被指定两次）。
<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>
当然。
<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>
