0
243
Views¿Cómo puedo hacer que el fondo sea medio visible cuando presiono el botón?
¿Cómo puedo hacer que la mitad de la pantalla esté parcialmente negra cuando hago clic en el botón, como en la imagen?
Hice la navegación móvil así y especifiqué que el color de fondo debería ser blanco:
.nav-links-row-mobile{ display: none; top:0; position: absolute; left:0; list-style: none; background-color: #ffffff; margin: 0; padding: 50px; height: 100%; } <div class="nav-links "> <ul class="nav-links-row-mobile"> <div class="nav-logo nav-logo-mobile"> <a href="index.html"> <h1>Brit</h1><span class="grey">lex</span> </a> </div> <li><a href="#!">Home</a></li> <li><a href="#!">Skills</a></li> <li><a href="#!">About Us</a></li> <li><a href="#!">Pricing</a></li> <li><a href="#!">Contacts</a></li> </ul> </div>Pero, ¿cómo puedo hacer que la segunda mitad de la pantalla sea medio negra o parcialmente visible?
¡Gracias de antemano!
·
Santiago Trujillo
1 answers
Answer question0
Intente darle una box-shadow con cero blur , una spread muy grande y use rgba() para hacer que el color de la sombra sea transparente.
body { width: 100%; height: 100%; background: url(https://www.fillmurray.com/800/600) no-repeat center center fixed; background-size: cover; } .nav-links-row-mobile{ top:0; position: absolute; left:0; list-style: none; background: #ffffff; margin: 0; padding: 50px; height: 100%; box-shadow: 0 0 0px 5000px rgba(0,0,0,0.5); } <body> <div class="nav-links"> <ul class="nav-links-row-mobile"> <div class="nav-logo nav-logo-mobile"> <a href="index.html"> <h1>Brit</h1><span class="grey">lex</span> </a> </div> <li><a href="#!">Home</a></li> <li><a href="#!">Skills</a></li> <li><a href="#!">About Us</a></li> <li><a href="#!">Pricing</a></li> <li><a href="#!">Contacts</a></li> </ul> </div> </body>
·
Santiago Trujillo
Report
Answer question