黑色CSS图像覆盖为白色

Question

我试图在页眉图像上创建一个黑色覆盖层，尽管我将颜色属性设置为黑色，但它似乎变成了白色。

<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

您的图像带有白色色调，因为它继承了其父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 2

设置background-color而不是color

background-color:#000;

Answer 3

也许您需要的是CSS过滤器。这里有一些例子。

Answer 4

请参阅我在此处创建的JSfiddle。这就是你想要实现的吗？您需要将color更改为background-color。

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