You can say that this is a duplication, but the other question + answers didn't work for me.

so. I am trying to blur the background where I want my text. So I setted a background image using css. And created a div that has a opacity of 0.1 and is blurred. Now I want to fill in contents in that dev (text). But that text is also blurred! How can I fix this?

I have searched a lot online on how to blur, and unblur etc. Nothing actually works for me.

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
@font-face {
    font-family: ProximaNova;
    src: url("ProximaNova-Regular.otf") format("opentype");
}

@font-face {
    font-family: ProximaNova;
    font-weight: bold;
    src: url("ProximaNova-Bold.otf") format("opentype");
}
body {
  background-image: url("bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.aaa {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    opacity: 0.1;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}
.b {
    background-image: url(bg.png);
}
</style>
</head>
<body>
<div class="aaa"><p>Hey, I want this text to NOT be blurred...</p></div>
</body>
</html>

Here is a codepen: https://codepen.io/anon/pen/YbWLgj

There is actually text in there, you can see it when you hover over with your mouse. Thanks for helping me!

0 Answers