黑色CSS图像叠加是白色的

Question

我正在尝试在标题图片上创建一个黑色叠加层，它似乎变成了白色，即使我将color属性设置为黑色。

<div id="overlay">
<header class="intro-header" style="background-image: url('http://localhost/WP/wp-content/uploads/2015/01/cropped-Skov.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>Svampe ting</h1>
                    <hr class="small">
                                            <span class="subheading">Posted by krillebimbim on January 30th, 2015</span>
                    <div id="avatar" class="row text-center"><img alt='' src='http://1.gravatar.com/avatar/d1f1634ce363d7dd8a0ca1522270c858?s=92&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D92&amp;r=G' class='avatar avatar-92 photo' height='92' width='92' /> </div>
                </div>
            </div>
        </div>
    </div>
</header>
</div>

我的叠加层CSS：

#overlay{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
color:#000000;
opacity:0.6;
}

标题样式：

.intro-header {
  background: no-repeat center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
 }

Answer 1

设置background-color而不是color

background-color:#000;

Answer 2

您的图片具有白色色调，因为它从其父div #overlay继承了60％的不透明度，就像该页面上的其他内容一样。在获得听起来像你想要的效果之前，你需要从该div中取出所有内容：

HTML：

<div id="overlay">
</div>
<header class="intro-header" style="background-image: url('http://localhost/WP/wp-content/uploads/2015/01/cropped-Skov.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                     <h1>Svampe ting</h1>

                    <hr class="small"> <span class="subheading">Posted by krillebimbim on January 30th, 2015</span>

                    <div id="avatar" class="row text-center">
                        <img alt='' src='http://1.gravatar.com/avatar/d1f1634ce363d7dd8a0ca1522270c858?s=92&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D92&amp;r=G' class='avatar avatar-92 photo' height='92' width='92' />
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

相关CSS：

#overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity:0.6;
}

http://jsfiddle.net/x7zu7m2y/

Answer 3

查看我创建的JSfiddle HERE。这是你想要完成的吗？您需要将color更改为background-color。

#overlay{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity:0.8;
}

Answer 4

也许你需要的是CSS过滤器。 Here你有一些例子。