Content (Schrift) ungewollt durchsichtig

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Marius123

Neues Mitglied
17 Juli 2021
5
0
1
21
1627170383841.png
1627170403834.png
Auf dem oberen Screenshot ist die Seite von Rockstar Games und dort sieht man, dass der Hintergrund ziemlich durchsichtig und der Rest nicht ist und beim unteren ist nicht nur der Hintergrund, sondern auch die Schrift durchsichtig(ich habe nur opacity:40%verwendet)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
Um dazu etwas zu sagen, müsste man auch den Code sehen. Am besten wäre es, wenn Du es online hast und die URL postest.

Und ich vermute mal, dass oben das ist, was Du haben willst und unten, wie es tatsächlich ist?
 

Marius123

Neues Mitglied
17 Juli 2021
5
0
1
21
Um dazu etwas zu sagen, müsste man auch den Code sehen. Am besten wäre es, wenn Du es online hast und die URL postest.

body{
padding:0;
margin: 0;
}
header.headImage{
height:55em;
grid-column: 1/5;
grid-row: 1;
background-image: url(../img/1920.png);
overflow: hidden;
right:0;
box-sizing: inherit;


}
nav.mainNav{
height:4em;
background-color:#000;
grid-column: 1/5;
grid-row: 1;
position: sticky;

text-align: center;
top:0;


}
nav.mainNav{
background-color:#121315e9 ;
opacity: 100%;
}
nav.mainNav ul{
text-align: center;
}
nav.mainNav ul li{
text-align: center;
}
nav.mainNav ul li a{
text-align: center;
}
nav.mainNav ul li a:hover{
text-align: center;
}
div.wrapper{
display:grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: minmax(100px ,auto);
grid-gap: 1em;

}
.wrapper > div:nth-child(odd){
background:#ddd;
}
div{
text-align: center;
border: 1px solid;
}
#one{
grid-column: 3;
grid-row: 4;
}
#two{
grid-column: 2;
grid-row: 3;
}#three{
grid-column: 1;
grid-row: 3;
}#four{
grid-column: 3;
grid-row: 3;
}#five{
grid-column: 1/3;
grid-row: 5;
}
nav.sticky{
background-color:#000;
height:4em;
}
nav.mainNav ul{
position: relative;
display: flex;
justify-content: right;
align-items:center ;
color:#b9b9b9;
}nav.mainNav ul li{
position: relative;
list-style: none;
text-align: right;
} nav.mainNav ul li a{
position: relative;
text-decoration: none;
letter-spacing: 2px;
font-family: sans-serif;
font-size:2em;
color:#b9b9b9;
margin:0 15px;
font-size: 1.3em;
font-weight: 500px ;
/*transition: 0.24s;*/
text-align: right;
opacity: 100%;
font-family: -apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;

}
nav.mainNav ul li a:hover{
padding-top:0.5em;
transition: 0.05s;
border-top: 5px solid #fcaf17;

}p{
color:#b9b9b9;
}


<!DOCTYPE html>
<html lang="de">
<div class="wrapper">
<head>

<header class="headImage">


</header>

<title>Name</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link href="https://fonts.googleapis.com/css?family=Glegoo" rel="stylesheet">
</head>
<body>
<nav class="mainNav">
<script type="text/javascript">
window.addEventListener("scroll", function(){
var nav=document.querySelector("nav");
nav.classList.toggle("sticky", window.scrollY >0)
})
</script>
<ul>
<li>
<a href="../html/index.html" title="Home">Home</a>
</li>
<li>
<a href="../html/index.html" title="Home">Home</a>
</li>
<li>
<a href="../html/index.html" title="Home">Home</a>
</li>
<li>
<a href="../html/index.html" title="Home">Home</a>
</li>
</ul>
</nav>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
</body>
</div>
</html>
 

Marius123

Neues Mitglied
17 Juli 2021
5
0
1
21
Anhang anzeigen 5659
Anhang anzeigen 5660
Auf dem oberen Screenshot ist die Seite von Rockstar Games und dort sieht man, dass der Hintergrund ziemlich durchsichtig und der Rest nicht ist und beim unteren ist nicht nur der Hintergrund, sondern auch die Schrift durchsichtig(ich habe nur opacity:40%verwendet)
Problem hat sich gelöst (der obere Screenshot verwendet einfach nur background-color: rgba(0,0,0,.4);)
 
Werbung: