Problema del índice z con el fondo de múltiples capas

Estoy tratando de implementar un diseño específico, pero ya me he topado con muchas complejidades.

El problema principal sigue siendo el fondo del degradado lineal: se extenderá en toda la ventana para que tenga un efecto satisfactorio ( position: absolute;width: 100%;height: 100% ).

Pero ese no es el único problema, también tenemos una imagen de fondo P sobre esa imagen de gradiente (con un índice z más alto y una opacidad de 0.3 ) y el degradado solo será visible para el encabezado y el pie de página (todo lo que esté debajo solo debe tener P y no degradado) .

Y lo hice . ( JSFiddle , ver el código de abajo)

Código

 #index_header { display: block; position: relative; } #index_navigation { position: relative; top: 0px; padding-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 850px; width: 80%; margin: 0 auto; } #index_logo { display: block; width: 150px; height: 52px; background-image: url("images/index/logo.png"); background-size: contain; background-repeat: no-repeat; } #index_navigation_left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_navigation_center { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-preferred-size: 80%; flex-basis: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_navigation_right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_navigation_core { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style-type: none; text-align: center; min-width: 420px; padding: 0; width: 60%; } #index_navigation_core li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #index_navigation_core li a { color: white; font-size: 1.250em; text-decoration: none; cursor: pointer; } #navigator_authentication { display: block; background-color: white; text-decoration: none; color: #860001; cursor: pointer; font-size: 1.125em; padding: 10px 30px 10px 30px; border-radius: 20px; } #index_footer { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 850px; width: 80%; margin: 0 auto; } #index_footer_left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_footer_right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_footer_left p { font-size: 0.938em; font-family: 'bpg_arialregular'; color: white; } #social_media_btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; list-style-type: none; } #social_media_btns li { display: inline-block; margin-left: 10px; margin-right: 10px; } #social_media_btns li a { display: block; width: 30px; height: 30px; } #social_media_facebook { background-size: cover; background-image: url("images/social_media_icons/universal/facebook.png"); } #social_media_youtube { background-size: cover; background-image: url("images/social_media_icons/universal/youtube.png"); } #social_media_twitter { background-size: cover; background-image: url("images/social_media_icons/universal/twitter.png"); } .present { border-bottom: solid white 3px; } .nav_button { -webkit-transition: border 0.35s ease; -o-transition: border 0.35s ease; transition: border 0.35s ease; } .nav_button:hover { border-bottom: solid white 3px; } #mobile_menu { display: none; width: 80px; height: 80px; cursor: pointer; background-image: url("images/icons/menu.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; } @media only screen and (max-width: 880px) { #index_navigation { min-width: 300px; } #index_navigation_center { display: none; } #mobile_menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_footer { min-width: 300px; } } @media only screen and (max-width: 500px) { #navigator_authentication { font-size: 0.9em; padding: 5px 10px 5px 10px; } #mobile_menu { width: 60px; height: 60px; } } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } body { background-color: #F5F5F5; } #index_overlay { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; z-index: 0; } #index_header { z-index: 3; } #about_pattern { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; background-image: url("http://www.miximages.com/html/F8SFW2p.png"); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; opacity: 0.3; } #about_pattern_2 { position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%); border: 1px solid #000000; box-sizing: border-box; } #index_navigation { padding-bottom: 25px; } #nav_background { position: absolute; width: 100%; height: 100%; z-index: -1; } #about_center { position: relative; display: flex; z-index: -1; overflow-y: scroll; flex-grow: 1; } #about_background { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #F5F5F5; z-index: -1; } #foot_background { display: inline-block; position: absolute; width: 100%; height: 100%; } #intro_text { position: relative; padding-left: 10%; padding-right: 10%; padding-top: 60px; padding-bottom: 60px; font-size: 1.125em; text-decoration: none; line-height: normal; flex-direction: column; justify-content: space-between; min-height: 100%; overflow-y: auto; text-align: left; color: #4F4F4F; } footer { position: relative; padding-top: 25px; padding-bottom: 25px; flex-shrink: 0; z-index: 3; } 
          
text here


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Problema:

Aunque lo logré visualmente, existe una preocupación importante por el uso práctico.

Si observa el código, #about_pattern es una imagen de fondo P y #about_pattern_2 es una imagen de gradiente.

#about_center elemento #about_center que se atasca entre el encabezado y el pie de página, debe tener un índice z más bajo en comparación con #about_pattern (para que pueda pasar) y un índice z igual o mayor en comparación con #about_pattern2 (por lo que no tenemos un efecto de degradado) .

Pero #about_pattern está en la parte superior, hace que todos los elementos en #about_center no sean accesibles para el usuario. Lo que parece ser un gran problema si alguien quiere, por ejemplo, desplazarse por el texto …

¿Es posible lograr este efecto sin bloquear el elemento central? ¡Gracias!

Una solución es eliminar z-index de #about_center para evitar el problema de contexto de astackmiento 1, luego podrá colocar #about_background y #intro_text como quiera ya que estarán en el mismo contexto de astackmiento del fondo degradado. A continuación, puede colocar uno debajo y el otro arriba.

Así que eliminas esto:

 #about_center { position: relative; display: flex; /*z-index: -1; */ overflow-y: scroll; flex-grow: 1; } 

Y añada esto:

 #intro_text { .... z-index:3; } 

Código completo:

https://jsfiddle.net/tfx9pLrq/3/

 #index_header { display: block; position: relative; } #index_navigation { position: relative; top: 0px; padding-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 850px; width: 80%; margin: 0 auto; } #index_logo { display: block; width: 150px; height: 52px; background-image: url("images/index/logo.png"); background-size: contain; background-repeat: no-repeat; } #index_navigation_left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_navigation_center { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-preferred-size: 80%; flex-basis: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_navigation_right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_navigation_core { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style-type: none; text-align: center; min-width: 420px; padding: 0; width: 60%; } #index_navigation_core li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #index_navigation_core li a { color: white; font-size: 1.250em; text-decoration: none; cursor: pointer; } #navigator_authentication { display: block; background-color: white; text-decoration: none; color: #860001; cursor: pointer; font-size: 1.125em; padding: 10px 30px 10px 30px; border-radius: 20px; } #index_footer { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 850px; width: 80%; margin: 0 auto; } #index_footer_left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_footer_right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_footer_left p { font-size: 0.938em; font-family: 'bpg_arialregular'; color: white; } #social_media_btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; list-style-type: none; } #social_media_btns li { display: inline-block; margin-left: 10px; margin-right: 10px; } #social_media_btns li a { display: block; width: 30px; height: 30px; } #social_media_facebook { background-size: cover; background-image: url("images/social_media_icons/universal/facebook.png"); } #social_media_youtube { background-size: cover; background-image: url("images/social_media_icons/universal/youtube.png"); } #social_media_twitter { background-size: cover; background-image: url("images/social_media_icons/universal/twitter.png"); } .present { border-bottom: solid white 3px; } .nav_button { -webkit-transition: border 0.35s ease; -o-transition: border 0.35s ease; transition: border 0.35s ease; } .nav_button:hover { border-bottom: solid white 3px; } #mobile_menu { display: none; width: 80px; height: 80px; cursor: pointer; background-image: url("images/icons/menu.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; } @media only screen and (max-width: 880px) { #index_navigation { min-width: 300px; } #index_navigation_center { display: none; } #mobile_menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #index_footer { min-width: 300px; } } @media only screen and (max-width: 500px) { #navigator_authentication { font-size: 0.9em; padding: 5px 10px 5px 10px; } #mobile_menu { width: 60px; height: 60px; } } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } body { background-color: #F5F5F5; } #index_overlay { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; z-index: 0; } #index_header { z-index: 3; } #about_pattern { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; background-image: url("http://www.miximages.com/html/F8SFW2p.png"); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; opacity: 0.3; } #about_pattern_2 { position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%); border: 1px solid #000000; box-sizing: border-box; } #index_navigation { padding-bottom: 25px; } #nav_background { position: absolute; width: 100%; height: 100%; z-index: -1; } #about_center { position: relative; display: flex; overflow-y: scroll; flex-grow: 1; } #about_background { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #F5F5F5; z-index: -1; } #foot_background { display: inline-block; position: absolute; width: 100%; height: 100%; } #intro_text { position: relative; padding-left: 10%; padding-right: 10%; padding-top: 60px; padding-bottom: 60px; font-size: 1.125em; text-decoration: none; line-height: normal; flex-direction: column; justify-content: space-between; min-height: 100%; overflow-y: auto; text-align: left; color: #4F4F4F; z-index: 3; } footer { position: relative; padding-top: 25px; padding-bottom: 25px; flex-shrink: 0; z-index: 3; } 
 
text here


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.