Inserir RGBA sobre background-image

[rafaelcrvs 3]

Pessoal, atualmente eu tenho uma div que no CSS contém meu background image. Veja:

<div class="banner-wrap">

e meu CSS:

.banner-wrap {
    background-attachment: scroll;
    background-clip: border-box;
    background-image: url("../images/b-1.jpg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover !important;
    min-height: 677px;
    opacity: 1;
    position: relative;
}

Em cima do background-image eu quero colocar um RGBA, para esmaecer um pouco a imagem, por exemplo aqui: http://www.flatiron.com/

 

Como posso fazer isso?

[rikaschmitt 54]

Você pode usar o "background-color", mas não vai ter o mesmo efeito.

O que você pode utilizar (e é o caso desse link que vc passou) é usar um pseudo-elemento por cima dessa div com a imagem, e nesse pseudo-elemento aplicar cor e transparência.

[rafaelcrvs 3]

confesso que naõ entendi. Tu podes me dar um exemplo com base no código que passei acima?

[rikaschmitt 54]

Claro.

 

http://jsfiddle.net/1xpb0emt/

[rafaelcrvs 3]

Obrigado meu caro!

 

Mas quando eu coloco .banner-wrap::before não tem efeito nenhum sob a imagem. Tentei também com .banner-wrap::after

[reebr 94]

Pode usar box-shadow:

div {
    background:url('img/foo.png');
    box-shadow: 0px 200px rgba(0, 0, 0, 0.4) inset;
    height: 200px;
    width: 200px
}

http://jsfiddle.net/kg05n7an/

[rafaelcrvs 3]

RE22,

 

Essa solução realmente funcionou, mas me pergunto: É a melhor solução?

 

Pergunto isso porque esse efeito vai aplicar corretamente ou não dependendo muito do tamanho do monitor, não?

 

Rafael!

[reebr 94]

Não, vai funcionar em um tamanho fixo.

 

Talvez seja melhor fazer com multiple backgrounds então:

div {
    background: linear-gradient(
                    rgba(0, 0, 0, 0.4),
                    rgba(0, 0, 0, 0.4)
                ),
                url('foo.jpg');
}

http://jsfiddle.net/kg05n7an/1/

https://jsfiddle.net/kg05n7an/1/embedded/result/