Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
confesso que naõ entendi. Tu podes me dar um exemplo com base no código que passei acima?
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
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
}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!
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');
}
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.