最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明。情况如下:

<div class="box">
这是一段不应该透明的文字
</div>
.box{width: 300px;height: 25px;background: red;opacity: 0.5}

这样我的文字几乎看不清,这当然不是我想要的,随即去查询资料,找到了一个解决办法,使用css3的属性:

.box{width: 300px;height: 25px;background: rgba(255,0,0,0.5);}

这种方式是利用css3的新属性,更改背景的透明度,这样就不会影响到内容的透明度,但是有一个问题就是目前很多浏览器对css3的属性不支持,没办法,为了兼容脑残的IE,还是琢磨出兼容的写法吧。

<div class="box"></div>  //专门用来做背景
<div class="text">
这是一段不应该透明的文字
</div>
.box{width: 300px;height: 25px;font-size: 24px;background: red;opacity: 0.5;position: absolute;left:;top:;}
.text{position: absolute;z-index:;left:;top:;}

把文字和背景放在不同的层里面,目前也只有这个笨方法来实现了,等到脑残的不标准的IE滚出浏览器界的时候,我们的CSS3就能派上大用场了。

让透明div里的文字不透明的更多相关文章

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

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

  2. div里粘贴文字后,移动光标至最后

    cursormanager.js //Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-hab ...

  3. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  4. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  5. CSS实现背景透明,文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

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

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

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

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

  8. JS实现背景透明度可变,文字不透明的效果

    最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明.所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的,会造成全部透明. 解决办法如 ...

  9. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

随机推荐

  1. 微信小程序 上传图片

    效果图  如上,js  如下,在页面循环图片就可以 /** * 选择图片 */ uploadImgAdd: function(e) { var imgs = this.data.imgs; wx.ch ...

  2. 机载LIDAR技术及其应用

    1 机载LIDAR的系统组成及原理 1.1 机载 LIDAR 技术的发展历程 LIDAR 技术和机载激光扫描技术的发展源自 1970 年,美国航空航天局(NASA)支持研制成功第一台对地观测 LIDA ...

  3. MATLAB插值

    转自原文 MATLAB插值 插值问题 在应用领域中,由有限个已知数据点,构造一个解析表达式,由此计算数据点之间的函数值,称之为插值. 实例:海底探测问题 某公司用声纳对海底进行测试,在5×5海里的坐标 ...

  4. ,典型递归问题-F(1025)mod 5 的值

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  5. Android ListView动画实现方法

    在Android中listview是最经常使用的控件之中的一个,可是有时候我们会认为千篇一律的listview看起来过于单调,于是就产生了listView动画,listview载入了动画会让用户体验更 ...

  6. 手机Android音视频採集与直播推送,实现单兵、移动监控类应用

    最新手机採集推送直播监控以及EasyDarwin开源流媒体平台的版本号及代码: EasyDarwin 开源流媒体云平台:https://github.com/easydarwin EasyClient ...

  7. Windows下Python2.7配置OpenCV2.4.10

    所需文件: 1 Python2.7.13 链接: https://www.python.org/downloads/release/python-2713/ 这里选Windows 64位的安装包. 2 ...

  8. Git-如何将已存在的项目提交到git

    1.首先在码云或者github上创建一个不带README.md的项目,然后复制远程库的地址(下面以码云为例): 2.进入本地已存在的项目目录:house  touch README.md //新建说明 ...

  9. VMware Workstation pro14 虚拟机下安装CentOS6.8图文教程

    转载收藏于 https://www.cnblogs.com/jepson6669/p/8371823.html 1 启动VMware的画面 2.点击 创建新的虚拟机 3 选择 典型(推荐) 4 选择 ...

  10. C#派生类中使用基类protected成员的方法

    我们知道C#中通过继承可以使一个具有公共数据和方法的基类被广泛应用从而减少代码量,这样派生类会具有基类中所有成员(除构造器等),我们理所当然可以通过派生类实例来使用基类的成员.那么当基类成员被prot ...