0

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!

Aaron Jonk
  • 3
  • 4
  • I think blurring is transitive and affects all child nodes, including tetx. What you can do is to not set the blur on the text container, but on a separate child element with a sibling relation to the text. Perhaps you can even use the before pseudo element to not have to have extra noise in the html DOM. – Eneroth3 May 12 '19 at 10:58
  • Could you give me a example? @Eneroth3 – Aaron Jonk May 12 '19 at 12:50
  • ` /* Using ::before to blur psuedo element with siblign relation to text, rather than parent of text. */ .blurred-bg::before { /* Place below text so text can eb selected. */ z-index: -1; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Changed the background to make it visible against background. */ background-color: #666; opacity: 0.1; -webkit-filter: blur(4px); -moz-filter: blur(4px); -ms-filter: blur(4px); -o-filter: blur(4px); filter: blur(4px); } ` – Eneroth3 May 13 '19 at 14:49
  • /* Took the liberty to give class a meaningful name. */ .blurred-bg { 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; } – Eneroth3 May 13 '19 at 14:50
  • For whatever reason code formatting doesn't seem to work in the comments, the code exceed the allowed length of a single comment and I can't post an answer, but if you run the above two comments through some kind of css clean up utility I hope you can find it useful. – Eneroth3 May 13 '19 at 14:52

0 Answers0