• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • opacity

    版本:CSS3

    opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。

    当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。

    使用opacity属性,当属性值不为1时,会把元素放置在一个新的层叠上下文中。

    示例

    /* 完全不透明 */
    opacity: 1;
    opacity: 1.0;
    
    /* 半透明 */
    opacity: 0.6;
    
    /* 完全透明 */
    opacity: 0.0;
    opacity: 0;
    
    opacity: inherit;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上版本的浏览器都支持opacity

    语法:

    opacity<number>

    取值:

    • <number>:使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。
    • 对应的脚本特性为opacity
    • 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果
    div{filter:alpha(opacity=50);} /* for ie8 and earlier */
    div{opacity:.5;} /* for ie9 and other browsers */
     
    默认值1
    适用于所有元素
    继承性
    动画性
    计算值指定值

    例子

    div {background-color: yellow; }
    .light {
      opacity: 0.2; /* barely see the text over the background */
    }
    .medium {
      opacity: 0.5; /* see the text more clearly over the background */
    }
    .heavy {
      opacity: 0.9; /* see the text very clearly over the background */
    }
    
    <div>you can barely see this.</div>
    <div>this is easier to see.</div>
    <div>this is very easy to see.</div>
    

    :hover时opacity的不同

    img.opacity {
      opacity: 1;
      filter: alpha(opacity=100); /* ie8 and lower */
      zoom: 1; /* triggers "haslayout" in ie 7 and lower */
    }
     
    img.opacity:hover {
      opacity: 0.5;
      filter: alpha(opacity=50);
      zoom: 1;
    }
    
    <img src="https://www.lanmper.cn/upload/browser/compatible_chrome.gif" alt="mdn logo" width="60" height="60" class="opacity" />
    
    mdn logo

    上篇:color

    下篇:text-fill-color