如何在透明的背景图片后添加背景颜色？

Question

如何在透明的背景图片后添加背景颜色？

3

我试图在透明的背景图片后面添加背景颜色，但是它没有生效。我想把它放在名为“heading”的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>

- Barton Lewis

1

不应该使用不透明度，因为它会影响所有的后代元素。你可以直接使用 background: #F0D8AB url(_images/pg_p_lewis_bckgrnd.gif) 987px 1587px no-repeat; - 这应该可以工作。顺便说一下，PX 单位没有小数点。等等... 你正在尝试在一个不属于其余内容的 <div> 上设置背景图片 - 如果你想将该 div 放置在其余内容上方，你也需要给它一个 z-index，这是我的猜测。我本来想测试一下，但由于你没有使用实际的图像 URL，我不知道它们长什么样子。 - junkfoodjunkie

谢谢。我在跟随背景div的内容div上使用了z-index，并将其添加到了我的代码中。当我用您提供的内容替换我的背景属性时，颜色确实出现了，但我的透明图像现在没有显示出来。我该如何为图像提供“实际的url”，以便有人可以测试它（我是新手）。谢谢。 - Barton Lewis

您需要将图像上传到服务器上，并在代码中使用完整的URL链接到它们。如果它们已经在服务器上可用，只需使用直接的http://链接替换链接到它们实际位置的链接即可。 - junkfoodjunkie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sen Jacob · Accepted Answer

您可以通过使用伪元素: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元素和具有背景图像的标题上方的渲染。

编辑1

我们可以使用background-blend-mode:screen来控制background-image和background-color的不透明度，而无需使用:before。

在此 fiddle中查看它。

rgba background-color的alpha通道可以控制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;
}

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