你可以在图像上覆盖一个透明的div

我在下面的图像中运行这个例子，这是在Flash中完成的，我想知道是否在图像底部有一个透明框，可能与CSS或其他什么闪光？你可以在图像上覆盖一个透明的div

http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png

2009-07-26 JasonDavis

没问题，这是这样的一个跨浏览器的方式：

<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>

来源

2009-07-26 03:25:47

这是惊人的太感谢你了！ – JasonDavis 2009-07-26 12:45:48

当然。

<div style="background-image: url(image.png);" > 

    <div style="position:relative; top:20px; left:20px;"> 
    Some text here 
    </div> 
</div>

来源

2009-07-26 03:13:19

<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>

来源

2009-07-26 03:40:14 drs9222

你可以在图像上覆盖一个透明的div

回答

相关问题