关于设置半透明背景的一些技巧

来源：互联网发布：阿里云com续费编辑：程序博客网时间：2024/05/16 19:53

通常，我们会用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背景图片上时，就能出现效果了，兼容问题有待改进…..

0 0