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

最新推荐文章于 2024-06-21 17:42:13 发布

又起风了

最新推荐文章于 2024-06-21 17:42:13 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签：半透明背景 html css3 hover

本文链接：https://blog.csdn.net/pan_xi_yi/article/details/46529855

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通常，我们会用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>