如何在CSS中用颜色覆盖图像？ [英] How to overlay image with color in CSS?

问题描述

我想在此标题元素上使用颜色叠加。我如何使用CSS？

I want a color overlay on this header element. How can I do this with CSS?

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

推荐答案

你应该使用rgba来覆盖你的元素photos.rgba是一种在CSS中声明包含alpha透明度支持的颜色的方法。您可以使用 .row 作为覆盖层，如下所示：

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

这篇关于如何在CSS中用颜色覆盖图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！