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

问题描述

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

I am trying to add background-color behind my transparent background-image and it's not working. I want it in the div called "heading". I tried using a png file first and then a gif file. I thought all gif's were transparent images. Any help would be appreciated.

#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

在此小提琴

#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元素，并在其上呈现带有背景图像的标头.

Here, since you need it for header element, the header is used instead of a separate background div. Notice that :before element is placed with absolute positioning and actual element is placed relative to that. Background color is applied to the before element and header with background mage is rendered over it.

编辑1

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

Instead of using :before, we can use background-blend-mode:screen to control the opacity of background-image and using background-color.

在此小提琴中查看.

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

The alpha channel of rgba background-color can control transparency of 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徽标，因为您提供的图像源路径是相对于您的页面的.

这篇关于如何在透明背景图像后面添加背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！