通常,我们会用rgba(),设置背景颜色,在某个图片上,实现当鼠标放在图片上出现半透明的效果,如下:
<!DOCTYPE>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset-utf-8">
<title>title</title>
<style>
.div1
{
width:1260px;
height:650px;
margin:0 auto;
background:url(../f_img/001.jpg);
}
.div
{
width:1260px;
height:650px;
margin:0 auto;
}
.div:hover
{
background:rgba(0,0,123,0.7);
}
</style>
</head>
<body>
<div class="div1">
<a class="div"></a>
</div>
</body>
</html>
可是,你会发现,明明没用,但是按理说,a标签的.div类属性会使图片产生半透明遮盖在图片上,可是没有,现在,在a标签中加上aaaaaa,保存,刷新,发现当鼠标放在aaaaaa上时,出现了aaaaaa背景变成了蓝色,为什么?这是由于,a标签是内联元素{display:inline;},设置的width和height是没用的,在http://blog.sina.com.cn/s/blog_75efec5501015526.html有详细介绍,然后,将body中的a标签,改成div标签,保存,刷新,鼠标放在背景上,这时发现,整个的背景图片都出现了蓝色,为何?因为div标签是块状元素{display:block;},它是可以设置设置大小的;a标签时,.div{}里面设置的宽高没用,只有aaaaaa撑开的部分有效,那么,此时默认的大小,就是撑开部分,撑开的部分设为S1,是当鼠标放在 S1上时,有.div:hover{}里面说明的属性,而.div呢,则是说明大小,所以,当a标签时,你可以设置.div{display:block; },是的,将a标签的display属性改变,那么,设置的宽高就有效了,这时你设置了鼠标放在图片产生属性的大小S2,此时,鼠标放在任何位置,和div( 替换a )标签是一样的效果了,同时,你可以在.div:hover{}中添加display:inline;会如何?是的,保存刷新,如你猜的,那样,鼠标放在背景图片任何位置,只有aaaaaa的背景部分变蓝,这是由于你固定了属性显示的大小。下面是一段简单的加了css3动态滑出div代码:
<!DOCTYPE>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset-utf-8">
<title>title</title>
<style>
.div1
{
width:500px;
height:400px;
margin:0 auto;
background:url(../f_img/001.jpg);
}
.div1 .div
{
width:500px;
height:400px;
margin:0 auto;
transform: translateY(-400px);
-webkit-transform: translateY(-400px);
-moz-transform: translateY(-400px);
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
transition-duration:2s;
}
.div1 :hover .div
{
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
transform:translateY(0px);
background:rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="div1">
<div class="div">aaaaaa</div>
</div>
</body>
</html>
当鼠标放在div1背景图片上时,就能出现效果了,兼容问题有待改进…..