css – 为什么子元素不能覆盖具有较大值的父对象的不透明度?

前端之家收集整理的这篇文章主要介绍了css – 为什么子元素不能覆盖具有较大值的父对象的不透明度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们知道,子元素现在不能覆盖其父元素的opacity属性。父的opacity属性始终生效。

这是有意义的,当孩子试图覆盖(覆盖用较小的值)父的不透明度。但是,如果孩子试图用更大的值覆盖它呢?不应该被允许吗?为什么半透明父体不能有不透明的孩子?任何人都可以分享为什么这样的限制被决定作为CSS设计的一部分的想法?

真的会感激,如果有人可以阐明这一理论原因的一些光。我基本上试图找出为什么 – 不能这部分(不是解决方法;因为那些已经谈到了很多时间)。我相信这是一些很多新手像我想要知道的人。

解决方法

我从来没有见过这种“压倒一切”或“根深蒂固”。这是一个相对不透明的问题。如果父级的透明度为0.5,则子级也有(相对于父级的堆叠上下文)。孩子可以有自己的不透明度值在0和1之间,但它将始终是相对于父的不透明度。所以如果孩子也有不透明度:0.5集合,它将不透明度的一些父的兄弟姐妹与不透明度1。

spec将它视为一个alpha蒙版,其中的不透明度只能删除。元素是不透明的,或者具有一定程度的透明度(任何<1):

Opacity can be thought of as a postprocessing operation. Conceptually,after the element (including its descendants) is rendered into an RGBA offscreen image,the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

@H_502_15@

和以后:

If the object is a container element,then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>

@H_502_15@

至于为什么这样实施,我不认为这是故意的“让我们禁止”的意义。也许这种方法被选择为更简单的计算,只有后来实际需要的东西不同被认可(然后rgba颜色和背景颜色介绍 – 我可能错了这里的时间轴)。

猜你在找的CSS相关文章