`

CSS实现背景透明,文字不透明,兼容所有浏览器- 白树- 博客园

 
阅读更多

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~

进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“,双11也算了,后面还要搞双12,不得不吐槽下。

于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下来,一来给自己做个小总结,提个醒,最近变懒了,再不努力就要倒挂了;二来是因为在网络上并没有完整的解决方案,希望可以帮助到遇到此类问题的朋友,今天主要讲解背景透明的解决方案,共勉~

重点内容入口:

测试浏览器:

VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0

如何实现背景透明,文字不透明,兼容所有浏览器?

我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例:

打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明)。

实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法

  • css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8
  • css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
  • IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)

css3的opacity

兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

使用说明:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background-color:#000000;
  opacity: 0.2;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    

<div class="demo">
    <p>背景透明,文字也透明</p>
</div>

</html>
复制代码

使用opacity后整个模块都透明了,展现如下:

那么使用opacity实现《背景透明,文字不透明》是不可取的。

css3的rgba

兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
  background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    

<div class="demo">
    <p>背景透明,文字也透明</p>
</div>

</html>
复制代码

在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,展现如下:

很奇葩的是,IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂rgba,解析后颜色为透明,其实应该是null

那么使用opacity实现背景透明,文字不透明是可取的。

IE专属滤镜 filter:Alpha(opacity=x)

使用说明:IE浏览器专属,问题多多,本文以设置背景透明为例子,如下:

  1. 仅支持IE6、7、8、9,在IE10版本被废除
  2. 在IE6、7中,需要激活IE的haslayout属性(如:*zoom:1或者*overflow:hidden),让它读懂filter:Alpha
  3. 在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position:static(默认属性),其子元素为相对定位,可让子元素不透明
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
    background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background: #000000;
  filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
  position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
  *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
.demo p{
    color: #FFFFFF;
    position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值,保证字体颜色不透明 */
}      

</style>
</head>
<body>    

<div class="demo">
    <p>背景透明,文字不透明</p>
</div>
复制代码

全兼容的方案

上以上3点分析可知,设置透明背景文字不透明,可采用的属性有rgba和IE的专属滤镜filter:Alpha,其兼容性如下图所示:

针对IE6、7、8浏览器,我们可以采用fiter:Alpha,针对标准浏览器我们采用rgba,那么问题来了,IE9浏览器2个属性都支持,一起使用会重复降低不透明度...

那么,如何只对IE6、7、8使用fiter:Alpha如何实现呢?2年前写过《CSS hack整理》一文,最新我也做了点更新,里面有IE的相关hack,找到只支持IE 6、7、8的方案,如下:

/* 只支持IE6、7、8 */

@media \0screen\,screen\9 {...}

ok,所有问题都解决了,全部代码如下:

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明,文字不透明</title>
<style>
*{
    padding: 0;
    margin: 0;
}

body{
  padding: 50px;
  background: url(img/bg.png) 0 0 repeat;
}

.demo{
  padding: 25px;
  background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.demo p{
  color: #FFFFFF;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
  .demo{
    background-color:#000000;
    filter:Alpha(opacity=50);
    position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
    *zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
  }
  .demo p{
    position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
  }  
}

</style>
</head>
<body>    

<div class="demo">
    <p>背景透明,文字不透明</p>
</div>

</html>
复制代码

下载demo

可能很多同学会觉得很复杂,为什么不直接用两个DIV放在同一个位置就行了,一个不透明DIV,一个文字DIV,很简单的解决问题,这也是好个方法,但是需要写绝对定位或负margin,并出现空内容的DIV,而且这是这种方法在有些场景下也会显得复杂,如下示例,鼠标经过商标后展现展现透明的提示文案,就需要控制2个DIV啦~

分享到:
评论

相关推荐

    CSS3实现可爱的小黄人动画

    每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿。 自己也想说搞一个DIY的动画出来,可是,会PS不一定...

    2021年3月办公室老师代表述职报告范文.docx

    【知识点】 这篇文档主要是一份2021年3月办公室老师代表的述职报告,讲述了办公室成员在过去一段时间内的工作情况和个人贡献。以下是提取的关键知识点: 1. **述职报告**:这是办公室老师代表向领导和同事展示工作...

    人教版语文五年级下册课内阅读专题训练.doc

    - 这段文字中,爸爸通过介绍白树的特性,寓言般地表达了人的品格——坚韧不拔、适应环境、无私奉献。 - “白树”象征着面对困难不屈不挠的精神,也是父亲希望孩子们学习的品质。 以上是对《草原》和《白》两篇...

    peunzhang.github.io:白树设计的前端小工具,很实用

    每个人的时间不多,写博客的初衷是希望做一点对自己有回报的事情,一来记录工作的方法和生活的感悟,方便查阅和回忆,二来利于思考和发现自己的不足,让自己变得更好。 个人经历 2007.9月就读广东工业大学 ...

    white-tree:Path:crossed_swords::shield:探路者龙与地下城角色统计网站

    白树 入门 确保已安装node (建议使用版本8或9) 确保已安装yarn (yarnpkg.com) 克隆此仓库 运行yarn install从package.json安装所有依赖项 运行yarn start以启动开发环境 您应该会很好,默认情况下该站点将在...

    普通话水平测试朗读篇目60.doc

    - 描述了白树的形象,强调其在恶劣环境下展现出的坚韧不拔的精神,这可以联想到人面对困难时应有的态度。 - 文章中的白树象征着北方农民和抗日战争时期的哨兵,表达了作者对坚韧品质的赞美,同时也隐含着对普通人...

    普通话测试朗读作品60篇.doc

    4. 描述手法:作者运用拟人化的手法,将白树比喻为“伟丈夫”,强调其坚毅的品质,同时通过对比(与“婆娑”的好女子相比),突显白树的正直和刚毅。 5. 象征意义:白树在文中不仅是自然界的生物,还被赋予了象征...

    五年级下册语文期末复习资料人教版.doc

    - 作者通过白树的形象,赞颂了边疆建设者的奉献精神和远大志向。 - 中心思想是借白树象征边疆建设者扎根边疆、为祖国建设付出的决心。 - 关键句子分析,揭示了白树的坚韧和无私,以及边疆建设者的崇高品质。 4....

    人教版五年级语文(下册)知识要点说明.doc

    - 托物言志的手法,白树的特性(直、坚强)象征建设者的坚韧不拔。 - 父亲的话和结尾的小树,寓意着建设者的精神代代相传。 4. 《把铁路修到去》 - 记述了西部建设者克服重重困难,修建风火山隧道的故事。 - 词语如...

    人教版五年级(下册)随文练笔序列.doc

    3. **白白树** - 学习借物喻人的写作手法,通过模仿课文,写一个片段,以事物象征人的品质,培养学生的比喻能力和想象力。 4. **古诗词三首** - 学习将诗词改写成短文,要求学生将《清平乐·村居》这首词转化为叙述...

    初中记叙文阅读训练一.doc

    5. 段落结构: 第③段采用插叙,介绍了年轻人的背景,增加了故事的深度和可信度。第④段对比屋后修剪过的白树与屋前未经修剪的白树,为下文的哲理讨论铺垫。 6. 表达手法: 描述白树时,采用了对比和拟人的手法,赋予...

    人教新课标五年级语文下册-配套练习册答案.doc

    - 阅读材料中提到的白树象征着扎根边疆的决心和坚韧不拔的精神。 - 描述青藏铁路的建设,展现了人们克服困难的勇气和毅力。 - 古诗的学习,涵盖了对古人生活、情感和自然景观的描绘,如吕岩的《牧童》、万里的...

    七年级语文上册 第三单元复习2(无答案) 苏教版 试题.doc

    - 咬文嚼字(yǎo wén jiáo zì):对文字的咬嚼,形容过分地推敲字眼。 - 冥思苦想(míng sī kǔ xiǎng):深思熟虑、苦心思考。 - 驰骋(chí chěng):疾驰、奔跑。 - 陈词滥调(chén cí làn diào...

    普通话水平测试用朗读作品40篇.doc

    【标题】: 普通话水平测试用朗读作品40篇 ...这些知识点在普通话水平测试中可以用来展示朗读者的语言表达能力,对文字的理解力,以及情感的传递效果。朗读者可以通过对这些故事的生动演绎,提高自己的普通话测试成绩。

    第十册课后练习答案.doc

    - 在分析白树特性的段落中,可以看出作者采用了托物言志的手法,以白树象征坚韧的精神,通过描述其特性来表达深层次的含义。同时,文中的隐喻和象征,如“一棵高大的白树”和“几棵小树”,暗示了父辈对下一代的...

    部编版六年级语文下册《3.古诗三首》同步练习题(含答案).doc

    - “中庭地白树栖鸦”:通过“地白”形象地描绘出月光洒满庭院的景象。 - “冷露无声湿桂花”:冷露不仅润湿了桂花,也暗示了秋天的凉意。 - “今夜月明人尽望”:表现了中秋节之夜人们的共同情感——对月亮的...

    五年级下册语文笔记.doc

    - 设问与象征:爸爸以白树自勉,表达扎根边疆的决心,小树则象征新一代的成长。 3. 古诗词学习: - 《牧童》:吕岩的诗,展现了牧童悠闲的生活,表达了对简单生活的向往。 - 《舟过安仁》:万里的诗,揭示了...

    苏教版七年级语文上册课时练习题6精选.doc

    7. 难点拓展:写作练习要求学生以个人的视角描绘赏月时的情景和感受,这不仅考验学生的语言表达能力,也锻炼他们将情感融入文字的能力,是提高文学创作水平的重要环节。学生可以描述月光如何洒满大地,夜晚的静谧,...

    五年级(下册)语文课后练习题汇总.doc

    - 在《白》这篇文章中,白树象征着坚韧不拔的建设者,通过白树在艰苦环境中的生长,寓言性地赞扬了边疆建设者的奉献精神。 4. **人物分析**: - 爸爸的形象代表着一代边疆建设者,他的言谈举止既体现了自身的志向...

    五年级语文(下册)优生辅导记录文本.doc

    - 缩句:保留主谓宾的核心成分,如“白树像士兵排列在马路两旁。” - 修改病句:删除多余成分,如“我们迈着轻松的步子,怀着愉快的心情来到公园。” 2. 文言文理解与应用: - 掌握文言词汇和句式,例如“惭愧的...

Global site tag (gtag.js) - Google Analytics