css透明度的设置（兼容所有浏览器）

最新推荐文章于 2025-02-06 10:45:44 发布

转载最新推荐文章于 2025-02-06 10:45:44 发布 · 1.3k 阅读

文章标签：

#css #透明 #多浏览器兼容

web前端专栏收录该内容

12 篇文章

订阅专栏

本文深入解析了CSS中透明度（opacity）、过滤器（filter）、溢出（overflow）和层级（z-index）属性在网页布局中的应用，特别关注它们在不同浏览器中的兼容性问题。通过实例展示如何使用这些属性实现复杂而美观的视觉效果。

.transparent_class {
      	filter:alpha(opacity=50);
      	-moz-opacity:0.5;
      	-khtml-opacity: 0.5;
      	opacity: 0.5;
     	overflow:hidden;
	background-color: #CAE1FF; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left: 0; 
	top: 0; 
	display: none; 
	overflow: hidden;
     	z-index:100;
}

Here is what each of those CSS properties is for:

opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit .
overflow: （1）visible:默认值。内容不会被修剪，会呈现在元素框之外。 (2):hidden:内容会被修剪，并且其余内容是不可见的。(3):scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。(4):auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。(5):inherit:规定应该从父元素继承 overflow 属性的值
z-index:对于这个属性，我个人的理解是指网页的整体的一个层，和我们视线垂直的网页面，z-index的值越大，这个div离我们的实现就越近，也就是说在别的div的上面。

感谢原文出处：http://justcoding.iteye.com/blog/545301#comments；