CSS中控制层的透明度

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中控制层的透明度相关的知识，希望对你有一定的参考价值。

CSS中如何控制层的透明度？

用滤镜实现的alpha属性 　　alpha是来设置透明度的。先来看一下它的表达格式：　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY） 　　哇，怎么这么长。是啊，不过这些参数都各有其用。
　　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
　　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
不过这不是CSS本身的属性 并不是所有浏览器都会支持的 参考技术A 在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。
<div class="box"></div>
<style>
.boxwidth:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3
</style>
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。
filter:alpha(opacity=30);这一个是针对IE浏览器
-moz-opacity:0.3;你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。
-khtml-opacity: 0.3;这是旧版本的Safari（1.×）当渲染引擎是使用仍被称为kthml，而不是目前的WebKit。 参考技术B 直接将下面的代码复制到一个记事本另存为HTML格式的文件即可! <!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=gb2312" />
<title>标准之路www.aa25.cn——div层半透明效果</title>
<style>
body background:url(/upfile/images/bg.jpg)
#layout position:absolute; top:50px; left:50px; width:500px; height:500px; border:1px solid #006699; background:#fff; filter: alpha(opacity=70); opacity: 0.7;
</style>
</head><body>
<div id="layout"></div>
</body>
</html> 说明:===================主要用到:filter: alpha(opacity=70);
opacity: 0.7;这个属性 参考技术C 在样式里面添加filter: alpha(opacity=数值);就可以了，数值那个地方时透明度0~100 参考技术D 我是来学习的，我学到了知识，呵呵，你这个问题提得太好了！

CSS 跨浏览器CSS不透明度控制

.transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

以上是关于CSS中控制层的透明度的主要内容，如果未能解决你的问题，请参考以下文章

怎么通过hover改变一张图片的透明度？谢谢

css怎么可以只让背景透明 文字不透明

CSS 跨浏览器CSS不透明度控制

不透明度 FadeIn 和 FadeOut 问题 - FadeOut 仅失败 CSS

CSS学习（十五）-CSS颜色模式CSS颜色透明度

如何降低 svg 滤镜中 Alpha 层的不透明度？