• 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. UIKit各类概述

    1.UIAcceleration: 被叫做加速事件的一个UIAcceleration类的实例是用来代表即时的三维加速数据.为了接收重力加速度,要注册一个应用应用程序作为一个共享UIAccelerate ...

  2. iOS imagePicker使用方法，方便使用！三步轻松搞定！

    自己总结的修改头像的方法,只为方便自己查询使用!转发 步骤:1.遵守代理协议 <UIImagePickerControllerDelegate,UINavigationControllerDel ...

  3. UVA 1401 Remember the Word（用Trie加速动态规划）

    Remember the Word Neal is very curious about combinatorial problems, and now here comes a problem ab ...

  4. mysql 断电 启动不了 start: Job failed to start

    公司内部服务器,突然断电,造成无法启动的解决办法 把my.cnf中配置的datadir路径下的ib_logfile* (比如ib_logfile0, lb_logfile1....)文件移到另外一个目 ...

  5. Windows7 下安装 CentOS6.5

    内容来自:http://blog.163.com/for_log/blog/static/2162830282013031031278/第一部分:安装前准备1. 准备两个fat32格式的分区,一个用于 ...

  6. 转：android中APK开机自动运行

    背景知识:当Android启动时,会发出一个系统广播,内容为ACTION_BOOT_COMPLETED,它的字符串常量表示为android.intent.action.BOOT_COMPLETED.只 ...

  7. 直接通过curl方式取得数据、模拟登陆、POST数据

    博客园的Markdown编辑器太坑爹了@!!! 算了.不用格式了!!! /********************** curl 系列 ***********************/ //直接通过c ...

  8. mysql添加超级管理员

    mysql>create user 'myroot'@'localhost' identified by 'myroot'; mysql>grant all privileges on * ...

  9. 如何在django的filter中传递字符串变量作为查询条件（动态改变查询条件）

    一般来说在需要查询数据的时候都是以下形式 ret=Articles.objects.filter(id=1) 然而如果要动态的改变查询的条件怎么办呢? 如下代码 def getModelResult( ...

  10. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...