不透明度

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>

 

posted @ 2016-12-01 09:38  党兴明  阅读(337)  评论(0)  编辑  收藏  举报