CSS背景半透明

xXsXSxsXSxsXS

于 2016-06-17 11:00:20 发布

阅读量99

点赞数

如何做到CSS背景半透明呢，秘诀就是使用两层背景。

底层是图片，上一层是一个透明度是0.5的黑色图层，就像加了滤镜一样。两层用z-index分辨。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{border:black solid thin;height:500px;width:300px;}
.back{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size: cover;z-index: -99}
.myba{background-color: rgba(0,0,0,0.5);z-index: -98}
.myba:hover{background-color: rgba(0,0,0,0.2);z-index: -96;border:white solid thin;font-size: 2em;}
p{font-family: myFirstFont;color: white;text-align:center;margin-top: 80px;}
p:hover{font-family: myFirstFont;color: white;text-align:center;margin-top: 80px;}
</style>
</head>
<body>
	<div class="back">
		<div  class="myba">
	<p>嘿嘿</p>
       </div>
   </div>
</body>