A-A+

将图片的说明显示在图片之上且背景半透明效果

2015年11月29日 htmlcss 暂无评论 阅读 72 次

1.给文字增加绝对定位

<style type="text/css">
body { text-align: center; font-family:Verdana; font-size:14px; }
.img-demo { position: relative; display: block; height:500px; width: 335px; margin: 0 auto; }
.img-demo cite { background: #333; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; color: #fff; position: absolute; bottom: 0; left: 0; width: 335px; padding: 10px 0; border-top: 1px solid #999; }
</style>
</head>
<body>
<h2>将图片的说明显示在图片之上且背景半透明效果</h2>
<div class="img-demo"> <img src="http://www.zztuku.com/uploads/allimg/121217/0Z1344039-0.jpg" _fcksavedurl="http://www.zztuku.com/uploads/allimg/121217/0Z1344039-0.jpg" alt="" /> <cite>Today is a greet day! 2008-12-16</cite> </div>
</body>

2.用图片来做背景

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width:300px;height:300px;background: url("http://img1.cache.netease.com/catchpic/5/5B/5B3845D04FE728ADAC8113C37877F67E.jpg")}
        a{display: block;width:300px;height:50px;background: red;margin-top:-50px;}
    </style>
</head>
<body>
<div>
</div>  <a href="#">娘亲手写下不离婚保证书</a>
</body>
</html>

3.

不用背景的话 你给文字浮动
图片不浮动

 

所以文字上来了背景颜色跑下面了

碰到的问题:

如果用margin-top写的话,会出现文字出现,背景被挡.

20151129224826

QQ图片20151129224752

 

ps:原理如下:

本身它们是同级的img是插入图片,所以文字上来了背景颜色跑下面了,文字是背景颜色,背景图片和插入图片的优先级

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录