[英]transparent overlay background image CSS
我有一个全屏的背景图像,但我想要一个黑色叠加,不透明度为0.7
这是我的代码:
body {
background:url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
我该怎么做呢?
我的HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>New Year Countdown</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div id="over">k</div>
</body>
</html>
结束必须是不透明度叠加。
使用div并指定透明覆盖整个身体的类然后使用:
.transparent {
background:rgba(255,255,255,0.5);
}
这将完成任务。
还要经历: w3学校图像透明度和叠加
您还可以使用以下技术进行处理:
background-color: black; /* The shade of black that you want*/
background-blend-mode: multiply;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.