LIVE DEMO

Question

我希望用透明色覆盖我的背景图像，但颜色并不覆盖背景图像。

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

css代码：

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

Answer 1

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

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

Answer 2

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;
}

enter image description here

这是您的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>

Answer 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

Answer 4

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

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

DEMO

Answer 5

更新了CSS

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

height中的

100%继承自parent。因此，您必须将其添加到body和body's 父 html。

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

覆盖叠加层

Answer 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>

用透明背景颜色覆盖背景图像（全屏）

6 个答案:

LIVE DEMO