Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Blur-Effekt auf Textblock</title> <style> * { box-sizing: border-box; } .text-block { background: url(https://w3docs.com/uploads/media/default/0001/03/0a71a511b3381286ced8e2fc7f331296cd96649f.png); background-attachment: fixed; width: 300px; height: 200px; position: relative; overflow: hidden; margin: 20px; } .text-block > header { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px; background: inherit; background-attachment: fixed; overflow: hidden; } .text-block > header::before { content: ""; position: absolute; top: -20px; left: 0; width: 200%; height: 200%; background: inherit; background-attachment: fixed; -webkit-filter: blur(4px); filter: blur(4px); } .text-block > header::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25) } .text-block > header > h2 { margin: 0; color: white; position: relative; z-index: 1; } </style> </head> <body> <h1>Blur-Effect auf Textblock</h1> <div class="text-block"> <header> <h2> Blur Effect </h2> </header> </div> </body> </html>