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

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.

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>