搜索
首页web前端html教程IE下的背景半透明处理(滤镜)_html/css_WEB-ITnose

现在做的网站首页,导航条等使用了半透明效果,调试的时候鄙人使用了Chrome浏览器,之前有考虑过IE的兼容性问题,但打算,网页完全布局完成后一次性解决。因为只要求兼容到IE8,所以感觉并没有什么太大的问题。

     但是当进入调试阶段的时候,我彻底“崩溃了”IE简直就是反人类的代名词,但问题仍然需要解决。

 

首先,正常情况下,在高版本的浏览器下,对一个盒子的背景使用半透明效果,我们只这样做的:

 

body {     background: url(../images/background.jpg) no-repeat;}.box {     background: rgba( 0, 0, 0, 0.5);}

 

     IE9以上的IE浏览器,以及其他大部分浏览器的高版本都是支持“rgba”的,因此如期的在背景图片之上会出现一层半透明的铺盖。

     当使用低版本的IE查看的时候,半透明的效果就不复存在了。(预计当中应该是出现一大块黑色的,当实际情况是背景色完全消失了。因为之前在《HTML&CSS设计与构建网站》(jon duckett著)中讲解到“rgba”属性时提到,当浏览器无法识别时会将其视作“rgb”所以,应当作为“rgb( 0, 0, 0)”处理了,理应是一块黑色。没有预期的效果,应当是浏览器直接忽略了这个元素,所以在编写css样式时将rgb( 0, 0, 0)加在“rgba”元素之前,当浏览器无法识别后面的元素时会采用之前的效果。)

 

     于是就使用了IE的滤镜来处理:

 

body {     background: url(../images/background.jpg) no-repeat;}.box {     background: rgb( 0, 0, 0);     background: rgba( 0, 0, 0, 0.5);     filter:alpha(opacity=50);     opacity:0.50;}

 

     效果也并没有出来,后来查看文章了解到,使用滤镜处理透明(opacity)效果的时候必须要给盒子设置应有的高度。

     修改如下:

 

body {     background: url(../images/background.jpg) no-repeat;}.box {     width: 1024px;     height: 1024px;     background: rgb( 0, 0, 0);     background: rgba( 0, 0, 0, 0.5);     filter:alpha(opacity=50);     opacity:0.50;}

 

有一张关于filter:alpha();opacity等的表格,可以解释一些东西:


IE 使用 'filter:alpha(opacity=50);' 通过 Filter 的 alpha 通道滤镜使元素半透明,但元素必须触发 hasLayout 特性。 

非 IE 浏览器使用 'opacity:0.5;' 这个 CSS3 草案中的 'opacity' 特性使元素半透明。

所以同时使用 'filter:alpha(opacity=50);' opacity:0.5; 即可保证在所有浏览器中呈现出半透明效果。

 

 

     如期,得到了我想要的效果。

     但并不应止于此,之前提到,为了在无法识别的浏览器上得到背景,所以之前使用了“rbg”元素;可是有时候也会有些意想不到的结果。加之,这样处理当样式多达一定程度时,常常需要为IE单独写一份样式,使用起来并没有得到太大的方便。

     在查找解决方法的时候还了解到一种方法,使用“DXImageTransform.Microsoft.gradient滤镜”来处理。这样能在只需要小部分处理透明问题的时候更简洁(仅个人意见,虽然写的更多)。

 

     代码如下:

 

body {     background: url(../images/background.jpg) no-repeat;}.box {     width: 1024px;     height: 1024px;     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99000000',endColorstr='#99000000');     /* IE6,IE7 */     -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";     /* IE8 */     background: rgba( 0, 0, 0, 0.5);}

 

关于“FILTER:progid:DXImageTransform.Microsoft.Gradient滤镜使用 ”的使用,查询到相关:

语法: 
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
属性: 
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false 
  true: 默认值。滤镜激活。 
  false:滤镜被禁止。 

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。 
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 
取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。 
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。 
特性: 
Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。 
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0 
  1:默认值。水平渐变。 
  0:垂直渐变。 
StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。 
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。 
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。 
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时,也可以用十六进制格式: 0xAARRGGBB 。 
说明: 
在对象的背景和内容之间显示定制的色彩层。 
当此效果通过转变显示时,在渐变册色彩层之上的文本程序性的初始化为透明的,当色彩渐变实现后,文本颜色会以其定义的值更新。 

基本使用方法就是:“我们要为它设置起点色(startColorstr)和终点色(endColorstr)。在单色透明的情况下,这两个值是相同的。它们的取值是一个八位的十六进制值,前两位表示alpha通道值,00表示完全透明,FF表示完全不透明;后六位则是这个颜色的RGB值。”

 

     至此,IE下半透明处理基本完成。除了IE其他浏览器,其他浏览器几乎都支持“rgba“属性,所以仅仅是IE的处理比较繁琐。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么?HTML中起始标签的示例是什么?Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?Apr 05, 2025 pm 01:24 PM

如何设计菜单中的虚线分割效果?在设计菜单时,菜名和价格的左右对齐通常不难实现,但中间的虚线或点如何...

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具