【问题标题】：Cover background-image with transparent background-color (full screen)用透明背景色覆盖背景图像（全屏）
【发布时间】：2014-08-07 15:36:46
【问题描述】：

我想用透明颜色覆盖我的背景图片，但是颜色没有覆盖背景图片。

这是我的演示： http://jsfiddle.net/farna/73kx2/

css代码：

.overlay{
    background: rgba(0,0,255,0.5);
    margin: 0 ;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

【问题讨论】：

你用过不透明度吗？

标签： html css background fullscreen

【解决方案1】：

LIVE DEMO

要实现这一点，您所要做的就是在身体上使用Pseudo-elements - CSS。这里我使用body:after

1.风格：

body{
    position:relative;
    background: url(http://8pic.ir/images/cgnd518gxezm1m2blqo7.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    margin:0
}
body:after{
    position:fixed;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,255,0.5);
    z-index:-1;
}

这是你的 HTML

2。标记：

<body>
      <div class="overlay">
          <nav>
             <ul>
                <li><a href="#portfolio">SHOP</a></li>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#contact">PRESS</a></li>
              </ul>
           </nav>
      </div>
</body>

【讨论】：

【解决方案2】：

将 position: fixed 添加到您的 CSS 规则中：

http://jsfiddle.net/73kx2/1/

【讨论】：

您的答案是正确的，但似乎ul 是用于导航菜单的。如果我们在整个页面上拉伸它，那么页面上将看不到其他部分。为这种着色效果添加一个虚拟元素会更好。

【解决方案3】：

将height:100% 添加到您的 html 和正文中。如下所示更新您的 CSS。

body, html{height:100%; margin:0; padding:0;}
.overlay{
background: rgba(0,0,255,0.5);
margin: 0;
width: 100%;
height: 100%;
padding:0;
}
ul{margin:0;}

DEMO

【讨论】：

【解决方案4】：

添加位置：固定到叠加层：

.overlay{
    background: rgba(0,0,255,0.5);
    margin: 0 ;
    width: 100%;
    height: 100%;
    top: 0px;
    position: absolute;
    left: 0px;
}

DEMO

【讨论】：

【解决方案5】：

更新的 CSS

.overlay{
    background: rgba(0,0,255,0.5);
    margin: 0 ;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

100% 中的height 继承自它的parent。所以你必须将它添加到body 和body's parent html。

但最简单的创建方法是使用 top: 0; left: 0; bottom: 0; right: 0; position: absolute | fixed; 覆盖覆盖

【讨论】：

【解决方案6】：

使用以下代码以获得最佳结果

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

【讨论】：