透明叠加背景图片 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19080437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
transparent overlay background image CSS
提问by Stef Blokdijk
I Have a background image full screen, but i want a black overlay on it with a opacity of 0.7
我有一个全屏背景图像，但我想要一个黑色覆盖层，不透明度为 0.7
This is my code:
这是我的代码：
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;}
How do i do this?
我该怎么做呢？
My html
我的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>
The over has to be an opacity overlay.
over 必须是一个不透明覆盖。
回答by Anobik
Use a div and assign a class transparent covering entire body then use:
使用 div 并分配一个覆盖整个身体的透明类，然后使用：
.transparent {
background:rgba(255,255,255,0.5);
}
which will do the task.
这将完成任务。
Also go through: w3 school image transparency and overlay
回答by Kartik Chauhan
You can also work it out using the following technique:
您还可以使用以下技术解决此问题：
background-color: black; /* The shade of black that you want*/
background-blend-mode: multiply;
