CSS Transparency

Navigation
3

I know that if I use opacity in a div, all the elements inside it will also become opaque. And I also know that I can use RGBA to make an element with a background color transparent, but how do I "transparentize" a background with an image? Is that possible?

    
asked by anonymous 19.09.2014 / 22:46

4 answers

2

It's kind of hard to do just what you want with CSS, without touching HTML, but depending on the rest of your current HTML, this might work or just need a few adjustments: 

#seu-elemento {
    z-index: 1;
    position: relative;
}

#seu-elemento:before {
    background: url(sua/imagem/de/fundo.png);
    opacity: .6; 
    z-index: -1;
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
}

See a demo here .

    
20.09.2014 / 00:54
2

You can do this using pseudo-selectors to simulate a transparent background with only CSS and no DOM elements: 

.conteudo:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
    background:url(sua-imagem.png);
    opacity:sua-opacidade;
}
.conteudo *{
    z-index:2;
    position:relative;
}

What the above code does is create a pseudo-selector and set it to an opacity you define, so that the image used by it would be transparent, at the same time that the rest of the element would still have opacity of 100 %.

Full example: FIDDLE

    
20.09.2014 / 01:53
1

Yes , instead of using the opacity property use linear-gradient . You can "merge" multiple values and fetch the result of background you need.

Using opacity , child elements will also be affected. For example: 

div {
    background: url(http://static-files.cdnandroid.com/1f/48/ef/32/imagen-paisagem-hd-live-wallpaper-2-0thumb.jpg) repeat;
    box-sizing: border-box;
    width: 100%;
    height: 300px;
    
    opacity: 0.2; /* usando opacidade */
}
<div>
    <img src='http://static-files.cdnandroid.com/1f/48/ef/32/imagen-paisagem-hd-live-wallpaper-2-0thumb.jpg' alt='minha imagem' />
</div>

Now the same example using linear-gradient : 

div {
    background:
        /*aplicando linear gradient*/
        linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%),
        /* e a imagem de background */
        url(http://static-files.cdnandroid.com/1f/48/ef/32/imagen-paisagem-hd-live-wallpaper-2-0thumb.jpg);
    
    box-sizing: border-box;
    width: 100%;
    height: 300px;
}
<div>
    <img src='http://static-files.cdnandroid.com/1f/48/ef/32/imagen-paisagem-hd-live-wallpaper-2-0thumb.jpg' alt='minha imagem' />
</div>

You can merge multiple values into the background attribute by separating them with a comma, for example: 

background: linear-gradient(to top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%),
            url("url_da_imagem");

-

Reference: link

    
20.09.2014 / 00:48
0

You can simulate that the image is inside the background element, but when in fact it is outside and only positioned on it, so you can apply the transparency in the background without affecting the image in front.

HTML: 

<div class="jumbo-destaque">
    <div style="background-image: url(http://drop.studiogt.com.br/g8/img/berinjela-tomato.png)"></div>
    <img src="http://drop.studiogt.com.br/g8/img/berinjela-tomato.png"></div>

CSS:

.jumbo-destaque{position:relative;width:640px;height:360px;}.jumbo-destaquediv{background-size:cover;width:100%;height:100%;opacity:0.5;}.jumbo-destaqueIMG{position:absolute;border:8pxsolid#fff;top:calc(50%-(320px/2));left:calc(50%-(471px/2));}

Seeexampleon JSFiddle

    
20.09.2014 / 01:13
User's way to include new pages in a site without programming Get array name inside array