CSS3中的透明属性opacity的用法实例

最新推荐文章于 2024-04-26 19:17:54 发布

前端老码农

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量2.2k

点赞数 2

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j111jbchj&title=CSS3%E4%B8%AD%E7%9A%84%E9%80%8F%E6%98%8E%E5%B1%9E%E6%80%A7opacity%E7%9A%84%E7%94%A8%E6%B3%95%E5%AE%9E%E4%BE%8B

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

实例

设置 div 元素的不透明级别：

div
{
opacity:0.5;
}

完整例子：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
</style>
</head>
<body>

<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>

</body>
</html>

您可以在本页底部找到更多实例。

浏览器支持

所有浏览器都支持 opacity 属性。

注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。

定义和用法

opacity 属性设置元素的不透明级别。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.opacity=0.5

语法

opacity: value|inherit;

值	描述	测试
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。	测试
inherit	应该从父元素继承 opacity 属性的值。

亲自试一试 - 实例

<!DOCTYPE html>

<html>

<head>

function ChangeOpacity(x)

{

// 返回被选选项的文本

var opacity=x.options[x.selectedIndex].text;

var el=document.getElementById("p1");

if (el.style.opacity!==undefined)

{el.style.opacity=opacity;}

else

{alert("Your browser doesn't support this example!");}

}

</script>

</head>

<body>

<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>

<option />0

<option />0.2

<option />0.5

<option />0.8

<option selected="selected" />1

</select>

</body>

</html>

前端老码农

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的透明属性opacity的用法实例

实例设置 div 元素的不透明级别： div{opacity:0.5;} 完整例子： <!DOCTYPE html> <html> <head> <style> div { back...
复制链接

扫一扫