CSS4 - fondo z-index

Yo estaba trabajando en un proyecto y tenía un pensamiento. Con más y más diseñadores web utilizando rgba en lugar de rgb, ser un poco frío para ver una nueva propiedad de fondos que se agrega a la hoja de especificaciones para css4 en el que puede definir el orden de la pila de capas de fondo itd.

Por lo que podría hacer algo como esto:



Esto colocaría el color en la parte superior de la imagen en lugar de la imagen de color. Un ejemplo cojo pero itd ser útil. Pensar con los gradientes css3 nuevas y múltiples antecedentes y tal.

Me gustaría + 1 que

Sé que su anterior es sólo un ejemplo simple, pero que aún podría lograr que mismo efecto por tener el fondo de una imagen PNG de la imagen fija con el alfa en 50%.

de acuerdo, pero decir que tienes algo parecido a un patrón de líneas diagonal como aquí en ozzu. En la parte superior del encabezado, las líneas diagonales son más prominentes que en el gris más claro en el cuerpo. No se puede ajustar la opacidad de una imagen, debe guardar dos imágenes separadas (o en el ozzus caso hoja de sprite havea) a fin de lograr este objetivo. Uno donde la diagonal línea patrón tiene 50% de transparencia, la otra donde la misma imagen tiene un 20% de opacidad. Luego se colocan encima de un gris claro o gris oscuro y negro.

Esto funciona genial, pero sería un infierno de mucho más fácil y un poco más rápido si simplemente podría colocar el color de la imagen y aplicar diferentes opacidades a los colores, haciendo que su patrón aparezcan más definido detrás de un color de mayor transparencia y menos definido detrás de un color de mayor opacidad.

Siempre podría colocar un div directamente sobre otro (dándoles los mismos atributos de colocación y utilizando el índice z para determinar su orden de apilamiento) y utilizar la imagen como fondo en la menor y la semi transpare no color como fondo en la superior.

No es tan cómoda, me doy cuenta, pero aún factible bajo las especificaciones actuales - que permite ser justo, muy probablemente tienen un rato (quién sabe cuando un CSS4 especificación estará fuera - o, más importante aún, cuando proveedores de navegador pondremos alrededor de adaptación).

Este sitio realmente necesita un +/-contador 1 reputación por puesto por lo que he podido + 1 que.