• CSS3中的透明属性opacity的用法实例
  • 孺子牛 发表于 2014/9/15 12:59:00 | 分类标签: CSS3 opacity 透明效果
  •  

    实例

    设置 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 onchange="ChangeOpacity(this);" size="5">
      <option />0
      <option />0.2
      <option />0.5
      <option />0.8
      <option selected="selected" />1
    </select>

    </body>
    </html>


  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:孺子牛
  • 加入时间:2013/6/4 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮