Entiendo que, en general, colocamos elementos individuales uno encima del otro en diferentes posiciones, muchas veces para dar la ilusión de dos o más elementos que están separados para parecer un solo componente. Pero, ¿hay alguna propiedad en CSS que pueda hacer que un elemento de posición más alta evite que todos los demás elementos detrás de él muestren la superposición y solo entre un rango de profundidad específico?

Solo para dar más contexto aquí, estoy haciendo un pastel dinámico, cada elemento es independiente, incluido el centro. La página tiene mucho dinamismo, efectos de agua en el fondo, niebla en la parte superior, imagen de fondo, etc. Todo tiene diferentes profundidades, pero entre todas ellas, quiero seguir siendo el centro del pastel "sin tocar" por todo lo que se muestra. en la parte posterior de la misma, manteniendo un fondo transparente . Una cosa con la que he estado luchando mucho es eliminar el color de fondo al pasar el mouse sobre un pie-niños.

Como puede ver en la imagen adjunta, el centro del pastel y todos los niños individuales tienen un fondo transparente. El centro del pastel tiene un índice z más alto que los niños, por lo tanto, cuando se desplaza un niño, su fondo se superpone con el centro del pastel. He aplicado un degradado de fondo transparente a los elementos circulares secundarios para eliminar la superposición, pero debido a que es un gráfico circular dinámico, solo funciona para un gráfico circular de 4 elementos. Cuando el pastel tiene menos o más de 4 elementos, el ángulo del degradado de fondo se vuelve desproporcionado.

Considere que el gradiente de fondo es solo un ejemplo, también quiero mostrar una sombra de cuadro en cada niño. La sombra del cuadro, así como el color de fondo, deben eliminarse del centro del pastel, pero el efecto de agua que ocurre en la parte superior de la imagen de fondo debe continuar.

Violín -> https://jsfiddle.net/jsandler/u34r8x9d/25/

Pie niños CSS

 .pie-children:hover { /* box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.2) inset, 0px 0px 30px 10px rgba(255, 255, 255, 0.2); */ background-color: rgba(255, 255, 255, .15); backdrop-filter: blur(5px); text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8); /* background-image: radial-gradient(farthest-corner at 0% 100%, transparent 0 25%, rgba(255, 255, 255, .15) 25% 100%); */ cursor: pointer; }