What is the difference between "opacity" and "filter: opacity()"

Question

Most of us know the simple opacity CSS rule, but recently I stumbled upon filter which can have opacity(amount) as it value - among other things. But what exactly is the difference between the two?

Answer 1

filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide hardware acceleration for better performance. Negative values are not allowed.

filter: opacity() applies transparency. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used.

Source: https://css-tricks.com/almanac/properties/f/filter/

/*
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/

.filter-opacity {
  filter: opacity(0.3);
  height: 5rem;
  width: 5rem;
  background-color: mediumvioletred;
}

/*
* -----------
* standard opacity
* -----------
*/

.just-opacity {
  opacity: 0.3;
  height: 5rem;
  width: 5rem;
  background-color: lawngreen;
}

<div class="filter-opacity">
  filter-opacity
</div>

<div class="just-opacity">
  just-opacity
</div>

Answer 2

I've found some difference between them both, especially in the Chrome browser. If we set the CSS opacity property to an iframe tag, then we'll not be able to click any links inside this frame (I guess, it's a protection from clickjacking attack) while filter: opacity(0) allows us to click any links. I don't know, maybe it's an omission from Chrome developers' side.