• CSS实现半透明的方法


    IE8不支持以前{filter:alpha(opacity=50);}的私有属性,

    转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

    加之Firefox2.0和Opera9.0以前版本很少见到,

    所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果,

     1 <div id="out">
     2     <div id="in">不透明<div>
     3     <div id="alpha">半透明<div>
     4 <div>
     5 <style type="text/css">
     6 #out{
     7    padding:20px 0;
     8    height:100px;
     9    width:200px;
    10    position:relative;
    11 }
    12 #in{
    13   background:#fff;
    14   margin:0 10px;
    15 }
    16 #alpha{
    17      position: absolute;
    18      top:0;
    19      left: 0;
    20      width: 100%;
    21      height:100%;
    22      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/
    23      filter:alpha(opacity=30);  /*IE5、IE5.5、IE6、IE7*/
    24      opacity: .3;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
    25      z-index: -1;  /*让其位于in的下面*/
    26      background:#fff;
    27 }
    28 </style>
  • 相关阅读:
    三种解决IE版本兼容性问题
    CSS 如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果
    bootstrap 笔记用法
    STL优缺点
    输出最大回文数
    将一组单词逆序输出
    排序算法
    背包问题
    二进制
    sstream
  • 原文地址:https://www.cnblogs.com/jweb/p/4614757.html
Copyright © 2020-2023  润新知