How do I blur a hole image with transparent text on top of it? (The text is visualized through the b-CodePudding

The idea is that I want the hole image to be blurred expect where the text is. The text should be seen through the image. Like where the text is, the image isn't blurred. If anyone has any idea would love the help, thanks!

CodePudding user response：

You could use the before and after pseudo-elements to create a blurred image and a non blurred text overlay that fits exactly over the blurred background.

Use filter: blur() to blur the background. And -webkit-background-clip: text; and -webkit-text-fill-color: transparent; to create a text overlay that has the same sharp version of the image as a background fill.

.blur {
    position: relative;
    overflow: hidden;
    height: 500px;
    width: 800px;
}

.blur:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('https://www.fillmurray.com/600/400') center;
    background-size: cover;
    filter: blur(18px);
}

.blur:after {
    content: 'BLUR';
    position: absolute;
    height: 100%;
    width: 100%;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 260px;
    font-weight: bold;
    text-align: center;
    padding: 100px 0;
    box-sizing: border-box;
    background: url('https://www.fillmurray.com/600/400') center;
    background-size: cover;
    color: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<div ></div>