Hintergrund von Div-Block nicht durchsichtig

Bei meinem Text auf dem Hero Image, ist der Hintergrund nicht durchsichtig. Ich habe versucht das mit dem background-color: transparent; versucht, doch der macht nur die hälfte weg.

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dreisam Republik</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } li, a, button,nav,header { font-family: "Montserrat", sans-serif; font weight: 500; font-size: 16px; color: #edf0f1; text-decoration: none; background: #24252a; } body{ display:flex; flex-direction:column; height:100vh; } header { display: flex; flex-direction:column; align-items: center; padding: 30px 10%; } ul,li{ list-style: none; } .nav__links li { display: inline-block; padding: 0px 20px; } .nav__links li a { transition: all 0,3s ease 0s; } .nav__links li a:hover { color: #0088a9 } button { padding: 9px 25px; background: rgba(0,136,169,1); border: none; border-radius: 50px; cursor: pointer; transition: all 0,3s ease 0s; } button:hover { background: rgba(0,136,169,0.8); } main{ display:flex; width:100%; height:100%; justify-content:center; background:url("https://sebastian1012.bplaced.net/test_seiten/wald.jpg"); } .Banner { display:flex; text-align: center; width:40%; max-width:400px; display:flex; flex-direction:column; justify-content: center; height:100%; color: white; background-color: transparent; text-decoration: none; } .Banner h1 { margin-bottom: 20px; text-decoration:underline; } .Banner p{ font-size:22px; } </style> </head> <body> <header> <nav> <ul class="nav__links"> <li><a href="#">Forum</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Über uns</a></li> <li> <button>Login</button> </li> </ul> </nav> </header> <main> <div class="Banner"> <h1>Die Dreisam Republik</h1> <p>Die Dreisam Republik ist ein Ein-Wöchiges Projekt, wo das DFG/LFA eine eigene Wirtschaft aufbaut</p> </div> </main> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!