问题描述
- 如何在html图片上方叠加一个半透明颜色层,并在半透明颜色层上叠加文字
-
问题是这样的:在用html写网页,现在有一张图片,需要置于最底层,然后在图片上方叠加一个半透明颜色层,并在半透明颜色层上叠加文字。
效果就像这张图片一样:
我写的代码如下:
li
div class="img-wrapper"
img src="0.jpg" alt="" width="110" height="110" border="0" /
/div
span 00:00:02 /span
/li
(没写<>的原因是:会被当成html代码,你们就看不到了)
但是文字在图片下方,并且半透明的颜色也不知道怎么写
哪位朋友能指导一下代码该如何写,十分感谢
解决方案
li relative定位,span absolute定位+opacity滤镜实现半透明效果,你发html代码的时候用</>这个工具栏按钮格式话一下你的按钮
DEMO
<style>
li{float:left;position:relative;}
li span.time{position:absolute;left:0px;bottom:0px;height:30px;background:#000;display:block;zoom:1;filter:alpha(opacity=40);opacity:0.4;width:100%;color:#fff;line-height:30px}
</style>
<ul><li>
<div class="img-wrapper">
<img src="0.jpg" alt="" width="110" height="110" border="0" alt="图片..." />
<span class="time">00:00:02 </span>
</div></li></ul>
解决方案二:
就是变成了这种形式:
非常感谢朋友您的回答。朋友,我现在有4个li,由于需要分成了2*2的格式,但是用以上代码后发现。变成了如下形式:就是在一行上面的两个图片是连在一起的,没有间距。在同一列上的图片也是连在一起的,也没有间距,能说一下:针对这个问题,这两个间距是如何设置的吗?十分感谢
时间: 2024-08-01 08:23:50