Geblurtes Rechteck hinter Text erzeugen
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: https://www.qvg-esports.eu
Der hier verwendete 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>