css背景透明文子不透明,CSS 实现背景透明 内容文字不透明 显示
思路主要是
IE9+ 谷歌 火狐等使用rgba(0,0,0,0.5)来确定透明度 前三个值是RGB值 可以直接参考PS里对应的值 最后一个是透明度
例子 background：rgba(255,255,255,0.5);
然后去兼容IE6-IE8
ie6-ie8使用hack
@media screen\,screen9{
.bg_opacity{
background:rgb(255,255,255);//或者#000
filter:Alpha(opacity=50);//设置整体透明度
position:static;//恢复默认 不让下面的文字继承透明度
zoom:1
}
//这里必须加上下级文字 position:relative;
.bg_opacity p{
position:relative;
}
}
下面是完整的实例
背景颜色透明，字体不会透明属性
.bg_opacity{
200px;
height: 300px;
margin: 0px auto;
/*ie9+ 谷歌 火狐 safari4+*/
background-color: rgba(0,117,49,0.5);
}
.bg_opacity p{
font-weight: bold;
display: block;
position: relative;
}
/*ie6-ie8*/
@media screen\,screen9{
.bg_opacity{
background-color: #007531;
filter:Alpha(opacity=50);
position: static;
zoom: 1;
}
}
css背景透明文子不透明,CSS 实现背景透明 内容文字不透明 显示相关推荐
- css如何实现背景透明，文字不透明？
之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景透明,文字不透明的解决方法: 为元素添 ...
- CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- CSS 设置背景颜色透明，文字不透明
2019独角兽企业重金招聘Python工程师标准>>> 通常情况下,设置<div>的背景颜色透明,那么<div>中的文字也会相应的透明化. <div&g ...
- CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位 至于opacity的作用:转化图像的透明程度.值定义转换 ...
- html和css实现透明div上的div不透明，也可说父div透明，子div不透明
css:实现透明div上的div不透明,也可说父div透明,子div不透明,但这里并不是严格的父子关系,只是看起来像是父子关系. 一.方法一: (1)代码片段: ...<style>div ...
- css如何实现背景透明，文字不透明
css如何实现背景透明,文字不透明? 之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景 ...
- css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果 一.常见的错误做法 最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
- html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
- css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css
如何用css实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容.不过如果你只需求 ...
最新文章
- Scala的基本语法总结
- 深度学习：yolo v3训练结果测试
- 山东省能源产业项目动态及未来投资决策建议报告2021版
- verilog中assign语句
- Wizard of Orz CodeForces - 1467A
- Dijkstra 计算两地间的最短距离
- mysql表变量临时表_表变量和临时表详解
- 个人收集 - 1、自动消失的消息提示(Js+Div实现)
- android 多线程封装,Android 线程池的封装
- 【CCCC】L3-005 垃圾箱分布 (30分)，Dijkstra跑n遍 = 多源最短路，emm
- 使用tf.data.Dataset.from_tensor_slices五步加载数据集
- 阿里是怎么做全链路压测的？
- ps技巧学习之常用8种抠图方法
- 解决Web部署 svg/woff/woff2字体 404错误(转)
- 如何给mac重做系统
- ChatGPT自动写了个AI办公office word插件,低配copilot,程序员看了焦虑。
- 改变世界的windows操作系统
- 常见面试算题题中的滑动窗口问题
- Spark任务执行流程
- python爬取app播放的视频,Python爬虫工程师必学——App数据抓取实战视频教程