不透明度属性的使用方法

  介绍

小编给大家分享一下透明度属性的使用方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

透明度属性是用来设置一个元素不透明度级别的,通过该属性我们可以设置图片,文字,盒子模型等等的透明度。

<强>作用:强检索或设置对象的不透明度。

<强>语法:

不透明度:值|继承;

值:规定不透明度。从0.0(完全透明)到1.0(完全不透明)。

继承:应该从父元素继承不透明度属性的值。

<强>说明:对于尚不支持不透明度属性的IE浏览器可以使用IE私有的滤镜属性来实现与不透明度相同的效果。

<强>

<强>示例1:

& lt; !DOCTYPE html>   & lt; html>   & lt; head>   & lt;元charset=皍tf-8"/比;   & lt; title> & lt;/title>   & lt; style>   h2 {   保证金:10 px 0;   字体大小:16 px;   }   test,   .test2 {   宽度:300 px;   身高:150 px;   填充:10 px;   }   test {   背景:# 050;   }   .test2 {   保证金:-120 px 0 0 50 px;   背景:# 000;   过滤器:α(不透明度=50);   透明度:5;   颜色:# fff;   }   & lt;/style>   & lt;/head>   & lt; body>   & lt; h2>下例是一个半透明的效果:& lt;/h2>   & lt; div>不透明度为100%的box
  & lt; div>不透明度为50%的box
  & lt;/body>   & lt;/html>

效果图:

不透明度属性的使用方法

<强>示例2:使用JavaScript来改变元素的不透明度。

& lt; !DOCTYPE html>   & lt; html>   & lt;元charset=癠TF-8"祝辞   & lt; head>   & lt; style>   .demo {   宽度:450 px;   身高:200 px;   背景颜色:红色;   保证金:10 px 0 px;   }   & lt;/style>   & lt; script>   函数ChangeOpacity (x)   {//返回被选选项的文本   var透明度=x.options [x.selectedIndex]。text;   var el=. getelementbyid (“box");   如果(el.style.opacity !==未定义)   {el.style.opacity=不透明度;}   其他的   {警报(“浏览器并# 39;t支持这个例子!“);}   }   & lt;/script>   & lt;/head>   & lt; body>      & lt; p id=皃1"祝辞请从下面的例子中选择一个值,以改变此元素的不透明度。;/p>   & lt; div id=癰ox"类=癲emo"祝辞& lt;/div>   & lt;选择alt="不透明度属性的使用方法">

看完了这篇文章,相信你对透明度属性的使用方法有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

不透明度属性的使用方法