`
zhouyrt
  • 浏览: 1163723 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

设置html元素的透明度

阅读更多

w3c标准属性是opacity,firefox3.5支持,但IE却不支持该属性(即使是最新的IE8)。

 

在FF3.5++,safari4,opera10,chrome4中测试都支持opacity。如设置div的透明度为40%:

<!DOCTYPE HTML">
<html>
  <head>
    <title>set div opacity</title>
    
	<style>
		.wrapper {
			border:solid 1px gray;
			opacity:0.4;
		}
	</style>
  </head>
  
  <body>
 
    <div class="wrapper">
		set div opacity
    </div>
				
  </body>
</html>

 

注意:firefox3.5以下版本使用-moz-opacity属性。

 

IE下复杂些:

1、IE4-IE7使用filter: alpha(opacity=xx),但要同时使该元素拥有hasLayout

<!DOCTYPE HTML">
<html>
  <head>
    <title>set div opacity</title>
    
	<style>
		.wrapper {
			border:solid 1px gray;
			background-color:green;
			filter: alpha(opacity=10);
			zoom:1;/* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
		}
	</style>

  </head>
  
  <body>
 
    <div class="wrapper">
		set div opacity
    </div>
				
  </body>
</html>

 

2、IE8下也可以用上面的filter: alpha(opacity=10),且不用设置zoom使元素拥有layout。同时IE8可以使用-ms-filter属性。如

 -ms-filter: "alpha(opacity=10)"; /* IE 8 */

 

详见:https://developer.mozilla.org/En/CSS:-moz-opacity

 

PS : IE9 pre3已经支持opacity属性(2010-7-14)

分享到:
评论

相关推荐

    Qt 控件透明度设置方法总结

    首先,Qt中的控件透明度主要涉及到窗口组件(QWidget)的背景透明和前景元素(如QLabel、QPushButton等)的透明。对于窗口组件,我们可以通过设置其窗口属性来调整其透明度。 1. **使用Qt的窗口属性:** - `Qt::WA...

    html透明文本框

    例如,将文本框的透明度设置为50%: ```css #myTextBox { opacity: 0.5; } ``` 但这仅仅让文本框整体变得透明,包括其边框和背景。若想仅改变文本框的背景透明,我们可以使用`background-color`属性并设置为`...

    网页半透明效果实用的html

    CSS3引入了`opacity`属性,用于设置元素的不透明度,其取值范围是0(完全透明)到1(完全不透明)。例如,如果要让一个div元素呈现50%的透明度,我们可以这样编写样式: ```css div { opacity: 0.5; } ``` 另外,...

    html页面全屏半透明demo

    在HTML和JSP中实现这样的效果,主要涉及到CSS(Cascading Style Sheets)的运用,特别是透明度控制和布局设置。以下将详细介绍如何实现这一目标。 首先,我们需要理解HTML的基础结构,它由各种标签组成,如`&lt;html&gt;`...

    CSS样式设置元素的透明度以50%为例

    下面将详细介绍CSS中设置元素透明度的方法,以设置透明度为50%为例。 在CSS中,控制元素透明度的属性为opacity。这个属性接受一个介于0到1之间的值,其中0表示完全透明,1表示完全不透明。若希望元素具有50%的透明...

    jquery特效菜单--透明度切换

    3. **CSS样式设置**:为了初始隐藏菜单项,可以将它们的透明度设置为0。当鼠标悬停时,我们将在JavaScript中改变这个值。 ```css #menu li { opacity: 0; transition: opacity 0.5s ease-in-out; /* 添加平滑过渡...

    js+html5实现半透明遮罩层弹框效果.docx

    - RGBA是Red Green Blue Alpha的缩写,它允许我们设置颜色以及透明度。 - 语法:`rgba(red, green, blue, alpha)`,其中alpha取值范围为0到1,0表示完全透明,1表示完全不透明。 2. **HTML5与JavaScript的基本...

    HTML5+CSS3 制作的图片半透明遮罩效果

    1. **伪元素**:我们可以利用`::before`或`::after`伪元素在图像上方添加一层半透明的颜色。例如: ```css .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; ...

    CSS透明度定义

    其中,CSS透明度设置是一项非常实用的功能,它允许开发者调整页面元素的不透明度,从而实现半透明或其他视觉效果。本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 ##...

    html5带背景半透明mp3网页音乐播放器

    总的来说,“html5带背景半透明mp3网页音乐播放器”是一个结合了HTML5音频元素、CSS3透明效果以及JavaScript交互功能的网页应用实例,它展示了HTML5在多媒体处理上的强大能力,为用户提供了一种美观且实用的音乐播放...

    js+html5实现半透明遮罩层弹框效果

    其中rgba中的最后一个参数0.5代表透明度为50%,即半透明效果。示例CSS如下: ```css .tip { text-align: center; position: absolute; height: 100%; width: 100%; background-color: rgba(90, 90, 90, 0.5); /...

    半透明html5博客主题

    半透明效果是HTML5中的一种常见视觉技巧,通过调整元素的不透明度,可以创造出既美观又不失功能性的设计。这种效果通常通过CSS3(级联样式表第三版)来实现,允许设计师精确控制网页元素的透明度。 这款博客主题...

    半透明图片叠加的功能

    半透明效果,也称为阿尔法混合或透明度,使得图片的一部分或整体可以透过背景看到,创造出深度感和层次感。在本话题中,我们将深入探讨半透明图片叠加的功能及其实现方式。 首先,让我们了解什么是半透明。在数字...

    css 网站半透明素材分享 PSD 半透明图片素材 网页素材

    在网页布局中,这些半透明图片素材通常会被插入到HTML元素中,如`&lt;img&gt;`标签,或者通过CSS的`background-image`属性来设置背景。配合CSS的其他属性,如`position`(定位)、`z-index`(层叠顺序)和`transition`...

    漂亮的半透明计算器

    半透明效果,也称为alpha透明或混合模式,是通过设置元素的透明度来实现的。在CSS中,可以使用`opacity`属性来调整元素的整体透明度,或者使用`rgba()`函数在颜色值中指定透明度,以实现更精确的控制。在这个计算器...

    PHPWind 半透明模板

    CSS3的`opacity`属性可以控制元素的整体透明度,而RGBA允许在颜色值中设置透明度,这样就能实现背景或者特定元素的半透明效果,且不影响子元素的色彩。 此外,HTML5的新特性如`&lt;canvas&gt;`元素也可以用于创建动态的半...

    一个半透明效果的弹出框

    在HTML和CSS中,我们可以使用`opacity`属性或者`rgba()`函数来设置元素的透明度,以此达到半透明效果。例如: ```css .pop-up { background-color: rgba(255, 255, 255, 0.8); /* 白色背景,80%的不透明度 */ ...

    CSS实现半透明效果

    而`Sunset.jpg`可能是一个用作示例的图片文件,可能在HTML代码中作为背景图或元素的src,展示了透明度设置的效果。 总之,CSS的`opacity`、`rgba`和`filter`属性是实现半透明效果的主要手段。理解并灵活运用这些...

    div设置背景图片透明度且字不透明

    1. 将背景图片设置为`div`的子元素,并使用`opacity`属性调整图片透明度。 2. 确保文字位于背景图片之上,使用不同的`div`或层进行定位。 3. 设置文字颜色,确保其与透明背景有足够对比,以便清晰阅读。 4. 若需设置...

    css3半透明遮罩背景lightbox图片展示特效

    这里的`rgba()`函数用于设置带有透明度的颜色,其中最后的参数代表透明度,0.5表示50%的透明度,黑色背景因此呈现出半透明效果。 二、Lightbox图片展示 在Lightbox效果中,图片通常会以某种动画效果显示。这里提到...

Global site tag (gtag.js) - Google Analytics