Как добавить фоновый цвет за прозрачный фоновый рисунок?

Question

Я пытаюсь добавить фоновый цвет за мой прозрачный фоновый рисунок, и он не работает. Я хочу это в 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> 

Answer 1

Вы можете сделать это с помощью элемента псевдо :before

Смотрите в this fiddle

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

Здесь, так как вам это нужно для элемента заголовка, заголовок используется вместо отдельного фоном div. Обратите внимание, что элемент :before размещен с абсолютным позиционированием, и фактический элемент помещен относительно него. Цвет фона применяется к элементу before, и над ним создается надпись с фоновым магом.

Edit 1

Вместо использования :before, мы можем использовать background-blend-mode:screen контролировать непрозрачность background-image и используя background-color.

См. Его в this fiddle.

Альфа-канал rgba 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; 
} 

Я использовал логотип Google, так как путь исходного изображения вы при условии, относительно вашей страницы.