• 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透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容的更多相关文章

  1. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  2. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  3. css实现遮罩层(解决透明背景上的文字不透明)

    .PopUp_layer{   position:fixed;   top: 0;   left: 0;   right:0;   bottom:0;   width:100%;   height:1 ...

  4. CSS实现DIV层背景透明而文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  5. css实现div块半透明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS实现背景图片透明和文字不透明效果

    1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) width: 500px; height: 300px; line-height: 50px; text-align: cente ...

  7. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  8. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  9. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. xpath选择器

    一.xpath中节点关系 父(Parent):每个元素以及属性都有一个父 子(Children):元素节点可有零个.一个或多个子 同胞(Sibling):拥有相同的父的节点 先辈(Ancestor): ...

  2. iOS--检测野指针

    定位野指针除了使用Malloc Scribble(内存涂鸦)外,还可以使用僵尸对象.所谓的僵尸对象,就是将被释放的对象标记为僵尸,系统不会回收这些对象的内存,并让这些内存无法被重用,因而也就不会被覆写 ...

  3. 一些简单的帮助类（1）-- String的类型验证

    在工作中经常会遇到 验证String 中的值是否属于Int型或者是Bool又或是Date 一般的做法是用方法 类型.TryParse(string,类型) 来做验证. "; int intV ...

  4. c++ fstream中seekg()和seekp()的用法

    转自:http://blog.sina.com.cn/s/blog_679f85d40100mysi.html 先说一下C语言中fseek()的功能: 函数原型:int fseek(FILE *fp, ...

  5. foreach的一点理解

    首先什么样的数据才能实现foreach 1 实现IEnumerable这个接口 2 有GetEnumerable()这个方法 然后为啥实现这个接口或者有这个方法就可以实现foreach遍历 首先我先用 ...

  6. C#控件命名规范

    文档名称: C#控件命名规范 撰写作者: codefly 版本编号: V1.1 C#控件命名规范 一.Data Control 类型 前缀 示例 AccessDataSource ads adsPub ...

  7. 【CMD】findstr命令

    findstr用来搜索匹配字符串的文件. FINDSTR [/B] [/E] [/L] [/R] [/S] [/I] [/X] [/V] [/N] [/M] [/O] [/P] [/F:file] [ ...

  8. 数组-去重、排序方法、json排序

    1.数组去重 /*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */ Array.prototype.unique=functi ...

  9. Python的简介以及安装和第一个程序以及用法

    Python的简介: 1.Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.自从20世纪90年代初Python语言诞生至今,它逐渐被广泛应用于处理系统管理任务和Web编程.Pytho ...

  10. OrderedDict

    OrderedDict 使用dict时,Key是无序的.在对dict做迭代时,我们无法确定Key的顺序. 如果要保持Key的顺序,可以用OrderedDict: >>> from c ...