如何在html图片上方叠加一个半透明颜色层,并在半透明颜色层上叠加文字-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何在html图片上方叠加一个半透明颜色层,并在半透明颜色层上叠加文字

小旋风柴进 2016-03-12 14:04:28 2934

问题是这样的:在用html写网页,现在有一张图片,需要置于最底层,然后在图片上方叠加一个半透明颜色层,并在半透明颜色层上叠加文字。
效果就像这张图片一样:
screenshot
我写的代码如下:

li 
div class="img-wrapper"
img src="0.jpg" alt="" width="110" height="110" border="0" /
/div
span 00:00:02 /span
/li

(没写<>的原因是:会被当成html代码,你们就看不到了)
但是文字在图片下方,并且半透明的颜色也不知道怎么写
哪位朋友能指导一下代码该如何写,十分感谢

分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:00:44
    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>
    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章