我跑过这个例子在下面的图片中,这是在Flash中完成的,我想知道是否有类似的影响透明框在图像的底部有文本上是可能的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; 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。