如何在透明背景图像后面添加背景颜色？

我试图在透明背景图像后面添加背景颜色，但它不起作用。我希望它位于名为“标题”的 div 中。我尝试先使用 png 文件，然后使用 gif 文件。我以为所有的 gif 都是透明图像。任何帮助，将不胜感激。

#heading {
    background-image: url(http://bartonlewis.com/_images/pg_p_lewis_bckgrnd.gif);
    background-size: 978px 1587px;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    background-color: rgba(255, 230, 184, 0.56);
    position: relative;
    height:100%;
    height: 230px;
    width: 960px;
    }
#content {
    float: left;
    height: 1800px;
    width: 960px;
    font-size: 1.1em;
    line-height: 1.2em;
    z-index:1;
    position:relative;
    }
div#heading p {
    font-size: 72px;
    text-align: center;
    margin: 100px 0;
    letter-spacing: 2px;
    }
#colD {
    width: 320px;
    float: left;
    text-indent: -999px;
    }
#colE {
    width: 30px;
    float: left;
    }
#colF {
    width: 250px;
    float: left;
    text-align: center;
    letter-spacing:.1em;
    font-family: "amador"; 
    font-variant: normal;
    font-size: 1.5em;
    }
#colG {
    width: 10px;  
    float: left;
    }
#colH {
    width: 350px;
    float: left;
    }
.floral-icon {
    vertical-align: middle;
    }
#colG img {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

    <div id="background">
    </div>
        <div id="content">
            <div id="heading">
                <div id="colD">empty</div>
                <div id="colE"><p><img class="floral-icon" src=http://bartonlewis.com/_images/pg_p_lewis_icon.png width="32" height="32"></p></div>
                <div id="colF"><p>Lewis</p></div>
                <div id="colG"><p><img class="floral-icon" src=http://bartonlewis.com/_images/pg_p_lewis_icon.png alt="floral icon" width="32" height="32"></p></div>
                <div id="colH"></div>
            </div>

您可以使用伪元素来做到这一点:before

看到它在这把小提琴 https://jsfiddle.net/4vLg9b7L/1/

#heading {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  position: relative;
  height:100%;
  height: 300px;
  width: 960px;
}
#heading::before {
  background-color: rgba(240, 216, 171, 0.25);
  display: block;
  content: '';
  position: absolute;
  height: inherit;
  width: inherit;
}

在这里，由于您需要它作为 header 元素，因此使用 header 而不是单独的背景 div。请注意:before元素以绝对定位放置，实际元素相对于该元素放置。背景颜色应用于之前的元素，并且带有背景法师的标题在其上渲染。

Edit 1

而不是使用:before， 我们可以用background-blend-mode:screen来控制不透明度background-image并使用background-color.

看到它在这把小提琴 https://jsfiddle.net/4vLg9b7L/2/.

rgba的alpha通道background-color可以控制透明度background-image.

#heading {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  background-blend-mode: screen;
  background-color: rgba(255, 230, 184, 0.66);
  position: relative;
  height:100%;
  height: 300px;
  width: 960px;
}

我使用了谷歌徽标，因为您提供的图像源路径是相对于您的页面的。