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

设置html元素的透明度

HTMLIECSS 
阅读更多

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效果中，图片通常会以某种动画效果显示。这里提到...

Magicbox
Global site tag (gtag.js) - Google Analytics