• 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. row_number() OVER (PARTITION BY COL1 ORDER BY COL2)

    select *,ROW_NUMBER() over(partition by deviceID order by RecordDate desc row_number() OVER (PARTITI ...

  2. ARC和MRC实现单例模式

    代码如下,可直接拷贝到头文件中 #define singleton_h(name) +(instancetype)shared##name # if __has_feature(objc_arc) / ...

  3. 初步认识 Web Service

     Web Service初步认识   Web Service:不是框架,不是一种技术,而是一种跨平台,跨语言的规范. 作用:异构平台之间的交互,解决了不同平台,不同语言所编写的应用之间的相互调用.(远 ...

  4. VIM 及正则表达式

    VIM及正则表达式 一.查找/Search + 统计 1.统计某个关键字 方法是:%s:keyword:&:gn. 其中,keyword是要搜索的关键字,&表示前面匹配的字符串,n表示 ...

  5. ubuntu ll命令

    用过 Redhat 的朋友应该很熟悉 ll 这个命令,就相当于 ls -l,但在 Ubuntu 中就不行了.严格来说 ll 不是一个命令,只是命令的别名而已.很多 Linux 用户都使用 bash s ...

  6. margin系列之内秀篇（二）

    本系列摘自  飘零雾雨的博客 可挖掘性 之前已经写过一篇关于 margin 应用场景的文章:margin系列之内秀篇,当然,它的应用场景会远大于文中所述,无法一一列举. 所以本篇权当是对此的补遗好了, ...

  7. 如何判断list中是否包含某个元素

    在python中可以通过in和not in关键字来判读一个list中是否包含一个元素: str = ['s','i','m','o','n'] if 'e' in str: print("e ...

  8. HTML 中<style>中</style>里面<!-- -->标签是干嘛的

    baidu:没什么用,这个主要是针对低版本的浏览器<!-- -->是html的注释标签,高版本的浏览器会识别<style>标签是样式表,并忽略里面的html注释标签,会解析它, ...

  9. hdu-A+B问题，大数加法

    格式问题很头疼啊 Input The first line of the input contains an integer T(1<=T<=20) which means the num ...

  10. IntelliJ IDEA配置缓存地址

    idea的配置缓存路径是保存配置文件和插件的本地目录,对idea上的所有个人修改全都储存在那里 相比于eclipse的免安装.解压即用来说,一旦系统重装或者idea重装又没有进行备份的情况下,个人对i ...