0

Can this be done? Would I be wasting precious time even trying to string filters together in such a way as to emulate this, such as via CSS filters?

Similar questions I saw are filled with answers over half a decade old.

Slbox
  • 10,957
  • 15
  • 54
  • 106
  • But why? If you meant, faking the opacity of an image without actually reducing its opacity then you need to place a div on top of it, make it fill all the space of the image then reduce that div's opacity but I don't know what you are trying to do so I don't know if this would help you. – Yuniac Sep 22 '21 at 01:12
  • Actually our purpose is to make a fade transition between elements. We use opacity over a white background for this mostly, but for these particular elements which overlay those - the opacity over opacity creates a very messy look. Mostly working with text here, not images, which is why the opacity creates such a messy look. – Slbox Sep 22 '21 at 01:28
  • Can you post your example code here, any good question on SO has a reproducible example so direct help and answers can be given. – Nathaniel Flick Sep 22 '21 at 18:28
  • @NathanielFlick that's an enormous overgeneralization to say _any_ good question has a reproducible example, especially in the case of - "Is this possible?" where of course I will have no example, because if I did I would have no question. – Slbox Sep 22 '21 at 18:49
  • @Slbox no, it's not, it's part of SO's guidelines for asking a good question: https://stackoverflow.com/help/how-to-ask. Sure maybe a better word is "most", didn't mean to offend. – Nathaniel Flick Sep 22 '21 at 19:15

1 Answers1

1

Changing the opacity is basically saying to the renderer "mix this element's color with whatever color is behind it".

It can be done, but the way to do it depends on the use-case, and gets tricky if you don't have a single color to base on.

Using filters

Basically you need to interpolate the HSB values from one color to another, depending on how much opacity you want, using a mix of hue-rotate, saturate and brightness.

Using animation

A simple example would be to transition the text color to the same as the background.

div {
  width: 250px;
  height: 65px;
  margin: 25px;
  background: #000;
}

h1 {
  animation: fadeToBlack 2s infinite ease-in-out;
  animation-direction: alternate;
  padding: 25px;
}

@keyframes fadeToBlack {
  from {
    color: #FFF;
  }
  to {
    color: #000;
  }
}
<div>
  <h1>I'm fading without opacity!</h1>
</div>
Sergio Carneiro
  • 3,726
  • 4
  • 35
  • 51