背景透明，文字不通明的做法

2015/06/02 34822

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景透明文字不通明</title>
<style type="text/css">
    .item{width:400px;height:300px;margin:0 auto;position:relative;}
    .hi,h3{position:absolute;left:0;bottom:0;width:100%;height:30px;}
    h3{line-height:30px;color:#fff;margin:0;z-index:1;}/*给文字设置了z-index值这样文字就不会透明了*/
    .hi{background:red;opacity:0.4;}/*透明背景*/
</style>
</head>
 
<body>
    <h1>背景透明文字不透明的做法</h1>
    <div class="item">   
        <p>
            <img src="http://www.hnta.cn/upfiles/20081179558239.jpg" />
        </p>
        <h3>你看我是不是没有透明啊</h3>
        <div class="hi"></div>
    </div>
</body>
</html>