CSS transparency

Asked

Viewed 787 times

3

I know that if you use opacity on a div, all the elements inside it will also be 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?

css

  • You want to use an image as a transparency mask?

  • No, I want to use a background image applying opacity by CSS directly. But I’m not sure that’s possible.

  • You want a div that goes over other elements, that this div has a background image, and that this background is semi-transparent via CSS. Got it right now?

  • No rs. Follow link ai. http://drop.studiogt.com.br/g8/index.php/receitas-internal

  • This image that comes from the side and is over this div with a background image. I need bg to be opaque.

  • post an image simulating the desired effect, otherwise it is difficult to understand. What is the problem with opacity in your specific case? You can’t just apply it to the desired div?

  • I think you want to make one lightbox. Would that be?

  • In the example you showed, it is a div behind with the image in its normal size and an upper div with the image in a smaller size. To apply the opacity effect you already.

  • Is your doubt about opacity and not about overlay? Apply opacity to background element only?

Show 4 more comments

4 answers

2

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

#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 demonstration here.

2

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

.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 with an opacity that you define, so that the image used by it would be transparent, at the same time that the rest of the element would continue with opacity of 100%.

Full example: FIDDLE

1

Yes, instead of using the property opacity utilize linear-gradient. You can "merge" various values and search for the result of background who is in need.

Using opacity, the 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 attribute background separating them by 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: https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds

0

You can simulate that the image is inside the background element, but when in reality it is outside and only positioned on it, so you can apply 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-destaque div {
    background-size: cover;
    width:100%;
    height:100%;
    opacity: 0.5;
}
.jumbo-destaque IMG {
    position:absolute;
    border: 8px solid #fff;
    top: calc(50% - (320px /2));
    left: calc(50% - (471px /2));
}

See example on Jsfiddle

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.