黑色 CSS 图像叠加为白色

Question

我正在尝试在 header 图像上创建黑色叠加层，但它似乎变成了白色，即使我将颜色属性设置为黑色。

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

以及 header 样式：

.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

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

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

Answer 3

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

Answer 4

您的图片带有白色色调，因为它从其父级 div 继承了 60% 的不透明度，#overlay，该页面上的其他所有内容也是如此。在获得听起来像您想要的效果之前，您需要从 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 图像叠加为白色

Black CSS image overlay is white

html

css

overlay

background