透明叠加背景图片CSS

Question

透明叠加背景图片CSS

3

我有一个全屏背景图片，但我想在它上面加上一个不透明度为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>

这句话的意思是：“覆盖层必须是透明度叠加层。”

- Stef Blokdijk

我浏览了骨架框架。它并没有什么不同，但事实是，如果你试图修改第三方div的css，即可能来自骨架框架的div，请尝试使用与.transparent{background:rgba(255,255,255,0.5) !important;}相同的样式，因为在运行时它们可能会被jquery更改。如果被使用 :) - Anobik

2个回答

1

您也可以使用以下技巧来解决问题：

background-color: black; /* The shade of black that you want*/
background-blend-mode: multiply;

- Kartik Chauhan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anobik · Accepted Answer

使用一个div并分配一个类名为"transparent"，覆盖整个页面，然后使用以下代码：

.transparent {
    background:rgba(255,255,255,0.5);
}

它将完成任务。

此外，请查看：w3 school图像透明度和叠加