Archiv-Modus von Basti1012 Lösungspage

Hallo, ich möchte ein Rechteck hinter meinem Text haben, dass es in etwa so aussieht wie auf dem Foto. Ich habe das heute schon einmal probiert, und habe es auch fast hinbekommen. Zu aller erst habe ich ein Rechteck erstellt und es gefärbt, dass sah sogar ganz gut aus, allerdings als ich den Blur-Effekt angewendet habe wurde die Schrift geblurt. Habt ihr eine Idee wie ich das hinbekommen könnte? Hier einmal ein link zur Website: <a href="https://www.qvg-esports.eu ">https://www.qvg-esports.eu </a>

Code

                                    
                                <html>
  <head>
    <style>
      .box {
    width: 80vw;
    height: 80vh;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    background: url(/image/364224615713208.jpg);
    border: 2px solid black;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

#blur{
  z-index:1;
  backdrop-filter: blur(3px);

  background:rgba(104,81,81,0.7);
  magin:auto auto;
  border:1px solid grey;
  border-radius:40px;
  width:80%;
}
#blur h3{
  font-size:30px;
  text-align:center;
  color:white;
}
#blur a{
  height:30px;
  text-decoration:none;
  display:block;
  width:100px;
  margin:0 auto 10px;
  border-radius:20px;
  background:#ac2a2a;
  color:white;
  padding:10px 20px;
}
      
    </style>
  </head>
<body>
<div class="box">
                
<div id="blur">
                                <h3>Apex Legends</h3>
 <a class="boxed-btn3" href="teamsapex.html">Teams</a>
            </div>
</div>
</body>
</html>

basti1012.bplaced.net

Geblurtes Rechteck hinter Text erzeugen

Code