css如何实现背景透明,文字不透明
css如何实现背景透明,文字不透明?
之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用。
- 为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-index设置到最底部,达到背景半透明效果。
- 使用CSS3新属性rgba。
- css3的opacity,取值从 0 到 1,如opacity : 0.5,IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性,例如:filter : Alpha(opacity=50)。
- css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如background-color : rgba(255,255,255,0.5)。
<div style="width:150px;height:100px;float:left;background-color:#ff0000;"><div>没有设置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;opacity:0.5;"><div>用opacity设置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5);"><div>用rgba设置透明度</div></div> <div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;filter:Alpha(opacity=50);"><div>IE专属filter设置透明度</div></div>
- 仅支持IE6、7、8、9,在IE10版本被废除。
- 在IE6、7中,需要激活IE的haslayout属性(如:*zoom:1或者*overflow:hidden),让它读懂filter:Alpha。
- 在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position : static(默认属性),其子元素为相对定位position : relative,可让子元素不透明。
IE6 | IE7 | IE8 | IE9 | 标准浏览器 | |
rgba | ✘ | ✘ | ✘ | ✔ | ✔ |
filter : Alpha | ✔ | ✔ | ✔ | ✔ | ✘ |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明,文字不透明</title> <style> *{padding: 0;margin: 0; } body{background-color: #ff7a74;padding: 100px; } .test-opacity{padding: 25px;background-color: rgba(255,255,255,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ }/* 只支持IE6、7、8 */ @media \0screen\,screen\9 {.test-opacity{background-color: #fff;filter: Alpha(opacity=50);*zoom:1;/* 激活IE6、7的haslayout属性,让它读懂Alpha */}.test-opacity p{position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */} } </style> <body><div class="test-opacity"><p>背景透明,文字不透明</p></div></body> </html>
css如何实现背景透明,文字不透明相关推荐
- 如何实现背景/背景图片透明文字不透明
如何实现背景/背景图片透明文字不透明 第一种情况,背景为自定义颜色 第二种情况,背景为图片 总结: 第一种情况,背景为自定义颜色 直接给父级背景颜色设置background:rgba();就可以了: ...
- html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...
- html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明?
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
- CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果 方法: 背景图片层添加样 ...
- css实现背景透明文字不透明
我们所说的设置透明度实际上是设置不透明度 使用opacity会导致背景和图片都透明,在此处不合适 <!DOCTYPE html> <html> <head> < ...
- 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...
- CSS 背景透明文字不透明
background:rgba(12, 7, 7, 0.45);括号里面的前3个值是rgba的颜色值,0.45是透明度,透明度的范围是0~1,0是完全透明, 1是完全不透明.
- div背景透明文字不透明
style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5); ...
- CDR怎么做透明文字和透明图片、水印
水印是一种数字保护的手段,在图像上添加水印即能证明本人的版权,还能对版权的保护做出贡献.也就是在图片上打上半透明的标记,因其具有透明和阴影的特性,使之不管在较为阴暗或明亮的图片上都能完美使用,嵌入的水 ...
- CSS设置文字背景虚化,变透明的两种方法
CSS文字背景虚化,变透明 拥有大背景,让div块变透明的方法: 方法1.背景是透明了,内容也会随之变透明. 方法2.仅背景透明 在整个项目有大背景的前提下,想让某表格背景或div块的背景不是白色,而 ...
最新文章
- 基于ARM Cortex-M的SoC存储体系结构和实战
- 一位合格软件工程师应该具备怎样的工程化、交付能力?
- 【一行命令】ubuntu 16.04 LTS安装pip3
- 有程序在记录你的键盘输入_12个用Java编写基础小程序amp;经典案例(收藏)
- python基础:迭代器、生成器(yield)详细解读
- 巧用记忆化搜索代替暴力递归(洛谷P1464题题解,Java语言描述)
- Xcode中常见的错误,警告和解决方法
- linux 启动网络服务,Linux下网络启动服务器安装和配置方法(pxe+tftp+dhcpd)
- AngularJS与服务器交互(4)
- Spark SQL Catalyst源代码分析之Analyzer
- 华尔街为何热捧优酷网?
- 多轴联动编程C语言,全国数控技能大赛―复杂部件造型、多轴联动编程与加工_...
- (23)ObjectARX2015 + vs2012操作图层
- 使用显卡+hashcat破解握手包
- 怎样成为优秀的测试工程师
- Android文件解压
- pikachu靶场通关之暴力破解
- JSP-java服务器端页面【学习笔记】
- 浅谈跨站请求伪造(CSRF)
- DCWriter 电子病历文档编辑器的 电子病历功能规范对照表
热门文章
- Ubuntu 经验 :系统安装 :分区方案
- android 5寸屏分辨率是多少钱,索尼Z5尊享版的屏幕尺寸是多少?分辨率是多少?...
- 【牛客网面经整理】阿里面经
- 【Linux云计算架构:第三阶段-Linux高级运维架构】第13章——redis
- 量化交易——传统技术分析相对强弱指数RSI的原理及实现
- SessionStorage如何存放对象
- 腾讯校园招聘会笔试题 难题解析
- A股市场机器学习多因子模型实证
- “模块版”波士顿动力的Handle圣诞来袭,原来做个轮腿机器人可以这么简单
- 学习openvz虚拟机