- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
- .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="<a href="http://www.hnta.cn/upfiles/20081179558239.jpg">http://www.hnta.cn/upfiles/20081179558239.jpg" />
- </p>
- <h3>你看我是不是没有透明啊</h3>
- <div class="hi"></div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/240420133007.html
来源: http://www.codesnippet.cn/detail/240420133007.html