zoukankan      html  css  js  c++  java
  • 不透明度

    css不透明度:

    假设要弹出一个警告消息框。

    .alert{
        background: #000;
        border-radius: 2px;
        opacity: 0.8;
        filter: alpha(opacity=80);//ie老版本不支持,解决方法
    }

    css不透明度的主要问题是会继承,弹出的文本也会是透明的,RGBa就是为了解决这个问题的。

    RGBa:

    RGba是一种同时设置颜色和不透明度的机制。RGB代表红绿蓝,a代表alpha透明度。上一个实例RBGa写法如下:

    .alert{
        background: rgba(0,0,0,0.8);
        border-radius: 2px;
    }

    PNG透明度:

    PNG文件格式最大的优点之一是它支持alpha透明度。但是ie6不支持,对此有两种办法解决。1:使用专有的AlphaImageLoader过滤器,需要使用一下代码:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/",sizingMethod="crop")
    background:none;  //第一条是使用专有过滤器加载PNG并应用alpha透明度。原来背景图任然会显示,所以第二个规则是隐藏原来的背景图像。

    但是这样会使css无效,最好把它放在ie6专用样式表里。

    ie条件注释:只向ie的特定版本提供特定的样式表,为了支队ie6起作用可以这样;

    <!--[if ie 6]-->
    <link href="ie6.css" rel="stylesheet/>
    <!--[endif]--><!--[if ie 6]-->
    <link href="ie6.css" rel="stylesheet/>
    <!--[endif]-->

    2:IE PNG fix技术。

    此处暂不介绍

    css视差效果:

    视差滚动效果:要想实现这种效果,首相需要创建几个不同的背景图像,其中一个图像是正常的,另外两个透明背景的图像盖在背景上。当调整窗口时,由于背景中的物体以不同速度移动,就产生有深度的感觉。

    body {
      background-image: url(img/bg-rear.gif);
      background-repeat: repeat-x;
      background-color: #d3ff99;
      background-position: 20% 0;//通过设置偏移位置不同实现效果
    }
    
    .midground {
      background-image: url(img/bg-mid.png);
      background-repeat: repeat-x;
      background-color: transparent;
      background-position: 40% 0;//使用更高的偏移,移动时产生感觉深度的效果
    }
    
    .foreground{
      background-image: url(img/bg-front.png);
      background-repeat: repeat-x;
      background-color: transparent;
      background-position: 150% 0;
    }
    -->
    </style>
    </head>
    
    <body>
      <div class="midground">
        <div class="foreground">
          <div class="content">
          </div>
        </div>
      </div>
    </body>
  • 相关阅读:
    控件的Visible设为false后,ViewState是否visible?
    协议森林02 小喇叭开始广播 (以太网与WiFi协议)
    Python深入02 上下文管理器
    信号与频谱
    飓风“桑迪”路径图的制作
    谁动了我的奶酪?
    协议森林01 邮差与邮局 (网络协议概观)
    协议森林04 地址耗尽危机 (IPv4与IPv6地址)
    协议森林03 IP接力赛 (IP, ARP, RIP和BGP协议)
    Python补充03 Python内置函数清单
  • 原文地址:https://www.cnblogs.com/by-dxm/p/6118783.html
Copyright © 2011-2022 走看看