不透明度
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>
本博客作为一个入门者的自学记录,欢迎各位同行者不吝赐教。