Hintergrund von Div-Block nicht durchsichtig

Diskutiere Hintergrund von Div-Block nicht durchsichtig im HTML Forum im Bereich Programmierung; Hallo, ich bin noch ziemlich neu in diesem ganzen Programmier Zeugs, und bin schon auf ein Problem gestoßen. Bei meinem Text auf dem Hero Image...
L

Lulu

New member
Dabei seit
14.07.2021
Beiträge
1
Hallo, ich bin noch ziemlich neu in diesem ganzen Programmier Zeugs, und bin schon auf ein Problem gestoßen. 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. Hier ist mein HTML code
HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Dreisam Republik</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="Top_Container">
        <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>
                </ul>
            </nav>
            <a class="cta" href="#"><button>Login</button>
        </header>
        <div class="Banner">
          <div class="Container">
            <div class="Banner_Content">

              <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>

              </div>
            </div>
        </div>
</body>
</html>


Und hier ist mein CSS:

CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252a;
}

li, a, button {
  font-family: "Montserrat", sans-serif;
  font weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}
.nav__links {
  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-color: rgba(0,136,169,1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0,3s ease 0s;
}

button:hover {
  background-color: rgba(0,136,169,0.8);
}

h1 {
  margin-top: 40px;
  margin-left: 65px;
  margin-bottom: 20px;
}
.Banner {
  background:url("DRHI3.png");
  padding-top: 40%;
  }
.Banner_Content {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: transparent;
  text-decoration: none;
  }

Ich würde mich auf Hilfe freuen.
Vielen Dank!
Lucien
 
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
138
Zuletzt bearbeitet:
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
138
Nochwas.
Vor den Button
Code:
   <a class="cta" href="#">
Kann weg
<h1> und <p> brauchen ein geschlossenes </h1>,</p>.
 
Thema:

Hintergrund von Div-Block nicht durchsichtig

Oben