How to override inline CSS background-color opacity, but not the color?

Question

The web page has a list of blocks like below. The background color of each block is done inline with 0.5 opacity. The 0.5 opacity is the problem. I need it to be completely opaque. I'm using the Stylish Chrome extension, and I need to do it with external CSS.

<a class="pizza" style="background-color:rgba(255, 255, 0,0.5);>this is yellow</a>
<a class="pizza" style="background-color:rgba(255, 0, 0,0.5);>this is red</a>

The only way I know how to change the opacity also involves changing the color for every block to the same. But each block in the list has it's own color, and needs to keep it's own color. How can I change the opacity of all blocks without also changing the color?

I would want something like this:

a.pizza {
  background-color: rgba(, , , 1);
}

Or like this:

a.pizza {
  background-color-opacity: completely opaque !important;
}

could you use CSS in a `` tags or in an external CSS File ? – KodeFor.Me Jun 21 '18 at 14:52 — KodeFor.Me, Jun 21 '18 at 14:52
CSS can't do that. You need Javascript. – Paulie_D Jun 21 '18 at 14:58 — Paulie_D, Jun 21 '18 at 14:58

score 1 · Answer 1 · answered Jun 21 '18 at 15:14

1

I've come up with a bit of a hack. It doesn't get you back to 100% opacity but pretty close.

The trouble is, without JavaScript, there's no way to find out what the colour is and take action based on that. So what you can do instead, is use CSS's inherit for the background color of child elements and layer them up to increase the overall perceived opacity of the main element.

So by adding two pseudo elements that inherit the background color and positioning them behind the main element you get very close to 100% opacity:

/* For the demo */
.pizza {  
  display: inline-block;
  vertical-align: top;      
  width: 120px;
  height: 120px;
}

/* Add relative positioning so we can position the absolute children correctly */
.pizza.new {
  position: relative;
}

/* Add two pseudo elements behind that inherit the background color */
.pizza.new::before,
.pizza.new::after {
  /* Sizing and positioning */
  display: block;
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Take the background color of the parent */
  background: inherit;
  /* Make sure they're not obscuring the content */
  z-index: -1;
}

<a class="pizza" style="background-color: rgba(255, 255, 0, 0.5);">
  This is yellow (before)
</a>

<a class="pizza" style="background-color: rgba(255, 0, 0, 0.5);">
  This is red (before)
</a>

<a class="pizza new" style="background-color: rgba(255, 255, 0, 0.5);">
  This is yellow (after)
</a>

<a class="pizza new" style="background-color: rgba(255, 0, 0, 0.5);">
  This is red (after)
</a>

answered Jun 21 '18 at 15:14

Luke

3,985
1
20
35

to know the exact value of the final opaticy you can take a look here : https://stackoverflow.com/questions/50574524/color-of-stacked-semi-transparent-boxes-depends-on-order/50574620#50574620 ... in this case you will endup with 0.86 approx – Temani Afif Jun 21 '18 at 15:18
That's interesting, thanks for the link! I had assumed it would be a bit closer than 86% – Luke Jun 21 '18 at 15:20
yes it's closer, I considered only 1 layer but you have two .. updated my comment – Temani Afif Jun 21 '18 at 15:20
That's some serious hackery, Luke. Unfortunately I can't touch the HTML so I can't add those extra elements with the "new" class. It's a webpage I use for hours every day, and I'm using Stylus to modify the CSS. – BumBumPooFace Jun 21 '18 at 16:08
@BumBumPooFace that's the beauty of pseudo elements, you don't touch the markup, it's all in the CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements – Luke Jun 21 '18 at 16:10
@Luke Thanks so much for your help. Okay I see you mean I remove the "dot new" text, then apply, right? . Duh. I tried that just now and it didn't quite work. I can see that it almost works - the color of one block is usually a dull yellow (because a transparent yellow over a black background). Then after applying your code, there is one pixel in the corner that is now bright yellow! But the rest of the block is still dull. So weird. Pics: Before: http://nimb.ws/LiIG2s After: http://nimb.ws/fxRPtB – BumBumPooFace Jun 23 '18 at 11:44
@BumBumPooFace It's hard to say without knowing the existing styles. Did you just remove the `.new` from my example and paste it into your stylesheet? Is it possible that the existing rules for `.pizza` have higher specificity and are overriding your newly added styles? – Luke Jun 24 '18 at 21:17

Temani Afif · Answer 2 · 2018-06-21T15:06:58.947

0

You can try to approximate it with mix-blend-mode and you will have an opaque color:

.pizza {
  display: inline-block;
  padding: 50px;
  position: relative;
  z-index: 0;
}

.pizza:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: -1;
  mix-blend-mode: multiply;
}

body {
  background: linear-gradient(to bottom, grey 50%,blue 0);
}

<a class="pizza" style="background-color:rgba(255, 255, 0,0.5);">this is yellow</a>
<a class="pizza" style="background-color:rgba(255, 0, 0,0.5);">this is red</a>

edited Jun 21 '18 at 15:06

answered Jun 21 '18 at 15:01

Temani Afif

245,468
26
309
415

@Paulie_D as I said, it's only an approximation for an opaque color ;) – Temani Afif Jun 21 '18 at 15:17
Thank you. I tried this out. It did manage to change the colors but didn't work quiet right. – BumBumPooFace Jun 21 '18 at 16:10

score -1 · Answer 3 · answered Jun 21 '18 at 14:53

-1

The easiest way I can think of, if you don't want to edit the colors themselves, would be to use a CSS pseudo-element to add an opaque white background (or whatever background color you want) behind every div with a colored background. You could use something like

div.pizza::after {
   content: '';
   position: absolute;
   height: 100%; 
   width: 100%;
   top:0; left: 0;
   background: #FFF;
}

You may need to tweak the z-index depending on your particular CSS.

answered Jun 21 '18 at 14:53

diopside

2,981
11
23

2

I think it should be clarified in the answer that what he is looking for isn't possible without using javascript. – Don Jun 21 '18 at 14:58
Why is that? i must be misunderstanding their requirements. – diopside Jun 21 '18 at 14:59
This won't make a pink background red...which is what is required. – Paulie_D Jun 21 '18 at 15:02
Temani proved me wrong! hah, didn't know about `mix-blend-mode` – Don Jun 21 '18 at 15:12
Ah - I thought OP was asking how to emulate the current appearance of the non-opaque colors without them actually being transparent (i.e - i like the color of this transparent background but dont want to see the stuff behind it or change the rgba string) – diopside Jun 21 '18 at 15:32

How to override inline CSS background-color opacity, but not the color?

3 Answers3