码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

时间:2014-10-30 13:26:23      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   color   os   ar   sp   div   on   

 

  • CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明,也就是越小越透明,颜色可以自定义。这样可以让图片上的文字更清淅,在一些图片特效中我们会见到这种效果。

<!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>
<title>CSS背景透明文字不透明</title>
<style type="text/css">
.item{width:500px;font:17px ‘微软雅黑‘;height:300px;margin:0 auto;position:relative;}
.hi,h3{position:absolute;left:0;bottom:0;width:100%;height:36px;}
h3{line-height:30px;color:#fff;margin:0;z-index:1;}/*加入z-index值,文字就不会透明了*/
.hi{background:blue;opacity:0.3;}/*背景透明*/
</style>
</head>
<body>
<h1>Div背景透明文字不透明</h1>
<div class="item">
<p><a href="http://www.codefans.net/jscss/"><img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" /></a></p>
<h3>你看!这行文字下面的背景透明了,而文字没有透明。</h3><div class="hi"></div>
</div>
</body>
</html>

CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

标签:style   http   io   color   os   ar   sp   div   on   

原文地址:http://www.cnblogs.com/skyay/p/4062173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!