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(https://img4.localgymsandfitness.com/571/320/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>

Add Comment

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

Comments

No comments yet. Be the first!