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

2024-05-13 23:57:43

实例

设置 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>

<script>

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>

<select οnchange="ChangeOpacity(this);" size="5">

<option />0

<option />0.2

<option />0.5

<option />0.8

<option selected="selected" />1

</select>

</body>

</html>

CSS3中的透明属性opacity的用法实例相关推荐

使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
css3中的box-sizing属性
盒子宽度.高度计算公式: css元素宽度 = width + padding + border css元素高度 = height + padding + border css3之前,当我们需要呈现一个 ...
css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些发布时间:2021-04-02 17:39:08 来源:亿速云阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
python pygame鼠标点击_Python中pygame的mouse鼠标事件用法实例
本文实例讲述了Python中pygame的mouse鼠标事件用法.分享给大家供大家参考,具体如下: pygame.mouse提供了一些方法获取鼠标设备当前的状态 ''' pygame.mouse.ge ...
java集合按大小排序_List集合对象中按照不同属性大小排序的实例
实例如下: package com.huad.luck; import java.util.arraylist; import java.util.collections; import java.u ...
css3中的column属性实现多列布局和瀑布流布局
在css3中有新增column属性可以实现页面的排版,使得页面更加整洁,现在一一为大家介绍用法以及属性值. columns:用于设置元素的列宽和列数.它是column-width和column-cou ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
css3中的动画属性
css3样式兼容前缀正常样式:teansform 前缀写法 -o-teansform //opear -ms-teansform //ie -moz-teansform //fir ...

最新文章

热门文章