`

IE, FireFox, Chrome浏览器，CSS实现半透明的方法

    博客分类：
  • web
Chrome浏览器IEFirefoxCSS 
阅读更多

IE, FireFox, Chrome浏览器，CSS实现半透明的方法：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>IE, FireFox, Chrome浏览器，CSS实现半透明的方法</title>
<style type="text/css">
.the-transparent {
	 width: 318px;
	 height: 119px;
	 margin-bottom: 10px;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /*IE8*/
	 filter:alpha(opacity=20);  /* IE6，IE7*/
	 opacity: .2;  /*Opera9.0+，Firefox1.5+，Chrome*/
	 background: #fff; /*支持图片 url(http://www.google.cn/logos/vivaldi10-hp.gif);*/
	 border: 1px solid red;
}
.no-transparent {
  background:#fff;
	 width: 100px;
	 height:100px;
	 border: 1px solid red;
}
</style>
</head>
<body>
    <div class="the-transparent"> 透明效果 </div>
    <div class="no-transparent"> 不透明效果 </div>
</body>
</html>
 

 

 

 

分享到：
| 非常诡异的字：弢
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    分享CSS中半透明样式的处理方法.docx

    CSS 中半透明样式的处理方法是指在网页设计中使用 CSS 语言来实现元素的半透明效果的各种方法。本文将介绍三种常见的半透明样式的处理方法。 一、元素容器透亮 在 CSS 中，元素容器透亮可以通过使用 opacity 属性...

    CSS代码实现背景透明而文字不透明

    本文将详细讲解如何使用CSS代码来达到这一目标，并确保代码在火狐（Firefox）、360浏览器、谷歌（Chrome）以及IE6到IE11等主流浏览器上都能正常工作。 首先，我们可以使用CSS的 rgba() 颜色函数。rgba() 函数允许...

    CSS 半透明度设置归纳总结[Firefox,IE,Chrome,Safari]

    本文将详细地介绍如何在Firefox、IE、Chrome以及Safari等主流浏览器中设置半透明效果。 首先，需要明确的是CSS中的半透明度属性通常通过`opacity`属性来实现。`opacity`属性用于设置元素的透明度，其取值范围从0...

    html+css透明背景

    本文将深入探讨如何使用HTML和CSS实现半透明背景，以及如何确保这种效果在不同的浏览器（包括IE6、7、8，Chrome和Firefox）中得到良好的兼容性。首先，我们来理解一下“半透明背景，内容不透明”这一需求。 在CSS中...

    IE6浏览器下PNG背景透明

    4. **升级浏览器**：虽然这并不总是可行的，但鼓励用户升级到更高版本的IE（如IE7及以上）或者切换到其他现代浏览器（如Chrome、Firefox、Safari或Edge），是解决此问题的最根本途径。 无论选择哪种方法，都需要...

    兼容各浏览器css渐变

    通过上述方法，我们可以实现兼容各个浏览器的CSS渐变效果。需要注意的是，在实际开发中，为了更好地兼容性，通常会结合使用多种写法，比如同时使用标准的CSS3语法以及特定浏览器的前缀语法。此外，还可以考虑使用...

    CSS-浏览器兼容实战.pdf

    书中还详细讲解了各种浏览器的特点，包括IE系列（如IE6、IE7、IE8、IE9）以及非IE浏览器（如Firefox、Safari、Opera、Chrome），并分析了它们对CSS支持的差异。 CSS的浏览器兼容性问题主要体现在滤镜、透明度、伪类...

    Css如何实现背景色透明或半透明但内容不透明

    对于现代浏览器，如Firefox、Chrome、Safari等，它们支持CSS3的`rgba()`函数，可以更方便地控制背景颜色的透明度。以下是一个示例： ```css .demo { background: transparent; /* 背景透明 */ color: #fff; /* ...

    div+css设置div的背景为半透明的方法

    2. **-moz-opacity** 属性：这是Firefox浏览器的私有属性，用于实现火狐的半透明效果。`-moz-opacity: 0.5`表示元素的透明度为50%。与IE的滤镜不同，Firefox不支持`filter`属性，所以需要单独设置。这个属性仅适用于...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    在本篇内容中，介绍了如何使用纯CSS技术实现div元素在网页中的自适应居中布局，同时确保兼容性可以覆盖至较旧的浏览器版本，如IE7、Chrome和Firefox。此处的自适应居中，指div能够在其父容器内水平及垂直方向上都...

    png24图在ie6下去半透明

    在其他支持Alpha透明的浏览器中，如Firefox、Chrome、Safari和更新版本的IE，PNG-24图像可以完美地显示透明和半透明效果。但在IE6中，只能显示PNG-8图像的简单透明（非半透明）效果，因为IE6仅支持索引透明性，不...

    IE 6 7 8 支持CSS3

    1. **CSS3前缀**：CSS3的一些属性在初期被不同的浏览器厂商采用时，为了防止冲突，它们添加了各自的私有前缀，如 `-webkit-` (用于Chrome和Safari)， `-moz-` (Firefox) 和 `-ms-` (Internet Explorer)。对于IE 6、7...

    IE6不兼容png透明背景解决方法

    4. **升级或更换浏览器**：鼓励用户升级到更新版本的浏览器，如IE7或IE8，或者使用Firefox、Chrome等现代浏览器。这是一个长期解决方案，但可能不适合那些仍然需要支持IE6的网站。 5. **使用PNG-8**：对于不需要...

    让 IE6 支持 PNG 透明

    因此，编写CSS时要确保对其他浏览器（如Firefox, Chrome, Safari, Opera等）的兼容性。 9. **最佳实践**： - 随着时间推移，IE6的使用率已经大大降低，现在更推荐使用渐进增强或优雅降级策略，优先确保现代浏览器...

    CSS3制作文字半透明倒影效果的两种实现方式

    总结起来，CSS3为我们提供了创造性的方法来实现文字的半透明倒影效果。虽然`box-reflect`在某些浏览器中受限，但通过`transform: scaleY(-1)`的组合，我们可以创建出跨浏览器兼容的倒影效果。在实际项目中，应根据...

    js+CSS实现弹出居中背景半透明div层的方法

    而对于现代浏览器，如Firefox、Chrome、Safari和Opera，它们支持CSS3的透明度设置，即 `opacity` 属性，可以实现跨浏览器的兼容性。 总结来说，实现js+CSS弹出居中背景半透明div层的方法主要包括以下步骤： 1. 创建...

    IE6_PNG透明终极解决办法

    鼓励用户升级到更现代的浏览器版本，或者使用其他兼容性更好的浏览器，如Firefox、Chrome等。 通过上述方法，开发者可以有效地解决在IE6中显示PNG图片时遇到的透明问题。不过，随着现代浏览器的普及，这个问题在新...

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