-Webkit-Tap-Highlight-Color: Rgba(0,0,0,0); on a Div

Transparent color vs rgba(0,0,0,0)

Behaviour is exactly the same, but transparent is compatible also with IE8.
RGBA is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.

For example, it could be very quick to set

background-color: rgba(0,0,0,0.1);

Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:

background-color: transparent;
background-color: rgba(0,0,0,0);

Or, more useful, in case of alreasy cited almost transparent backgrounds, you can write:

background-color: transparent;
background-color: rgba(0,0,0,0.1);

New browsers will set rgba(0,0,0,0.1) as background, overriding previous transparent declaration, but IE8 will set transparent as background, because it will ignore unrecognized rgba() value, so a slightly different result but in according to Graceful Degradation principle.

How to get the background color of an element (set to RGBA) in Javascript?

I will consider this answer where I am detailing how the color is calculated between two layers to write the following script.

/* Utility function that you can easily find in the net */
function extractRgb (css) {
  return css.match(/[0-9.]+/gi)
}
function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
/**/

var c = window.getComputedStyle(document.getElementById('box')).backgroundColor;
c = extractRgb(c);

for(var i=0;i<3;i++)
  c[i] = parseInt(c[i]*c[3] + 255*(1 - c[3])); /* Check the linked answer for details */

console.log(rgbToHex(c[0],c[1],c[2]) )

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<div id="box"></div>

CSS Adding opacity to the background color of a div and not to the content

You can use the alpha channel of the color as below which is a 4th argument in RGBA

rgba(255,0,0,0.1) /* 10% opaque red /

rgba(255,0,0,0.4) / 40% opaque red /

rgba(255,0,0,0.7) / 70% opaque red /

rgba(255,0,0, 1) / full opaque red */

Note: Red will have 255 as first argument and others as 0 and you can change the 4th parameter from 0-1 for opacity

.main{ background-color: rgba(255,0,0,0.7);   width: 100%;  height: 200px;  /*opacity: 0.5;*/}

<div class="main">  <p>Opacity of this text shouldn't be changed.</p></div>

Firefox rendering issue when box-shadow and rgba(0, 0, 0, 0.5)

That sounds normal comprehensible to me :

You are asking to create an box-shadow which starts with 0 offset, 0 blur, 0 spread.

But FF will still try to generate it (just like if it were 1px 1px 0px 0px).

div{  border-radius: 12px;  box-shadow: 1px 1px 0px 0px red;  height: 25px;  }

<div></div>

How can I cancel the opacity of a child div?

You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:

#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px; 
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}

Disable opacity on child element when parent element has opacity

Solved this problem by changing it to the following:

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

Used just rgba alpha instead of opacity.
Now it works.

---

Related Topics