Question 250161 in CSS Question posted in
Some basic documentation can be found here.

Css – Why rgba color with alpha value makes my div transparent

I’m trying to set a background color for a different popup variant, but when I set a background value to something that has alpha value in it, but makes it transparent

the following css code

--color: 255, 144, 106, 0.18;

background: var(rgb(--color))

screenshot with the result

Is there’s a way for me to retain the color without making the div non transparent?

Note: I can’t change the color token

tried changing the opacity of the parent or even setting a background on it, but no result

Tags:

4

Answers


  1. 0

    The alpha value changes the opacity of the color. There is not much you can do about it except changing the alpha value itself. If your div is completely transparent, you could try to add opacity: 1; to the styling.

    Edit: I just saw the example which makes my answer kind of invalid. If you can’t change the color variable, your only option is either to live with it or try to overwrite the color with a different opacity by creating a new variable.

    Login or Signup to reply.
  2. 0

    I see that you tagged this with javascript.

    One hack that isn’t as pretty as actually changing the code is using javascript to change it.

    Its not perfect and might flicker on load etc.. But your system has put you in a difficult place without having access to change certain things.

    const div = document.querySelector("#div");
div.style.background = "#ffebe5";
    #div {
  height: 100px;
  padding: 10px;
  background: rgb(255, 144, 106, 1);
}

body {
  background: black;
}
    <div id="div"></div>
    Login or Signup to reply.
  3. 0

    I really advice you to update the way you handle the colors. If you don’t want transparency, don’t set it.

    In this particular case, you can hack it by using multiple layers where the bottom one is black or white depending on your need:

    .box {
 --color: 255, 144, 106, 0.18;
  
 background: 
   linear-gradient(rgb(var(--color)) 0 0)
   #fff;
   
 height: 200px;
}


body {
  background: linear-gradient(90deg,blue, red);
} 
    <div class="box"></div>
    Login or Signup to reply.
  4. 0

    The correct syntax for RGBA values in CSS custom properties is as follows:

    --color: rgba(255, 144, 106, 0.18);

    Notice that I’ve used rgba() instead of rgb(), and this should correctly set the background color with the specified alpha (opacity) value. Using the rgba() function explicitly states that you are defining a color with an alpha channel, which should prevent the background from being fully transparent.

    Here’s the corrected CSS code:

    --color: rgba(255, 144, 106, 0.18);

background: var(--color);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search