-1

I want to create a div that has the p tag inside. I want this div to be blurred. And the p tag that is inside should not be applied to the opacity of the div tag

<div>
    <p>text</p>
</div>

div{
    filter:blur(5px);
   }

p{
  filter:blur(0px);
 }
Sajjad
  • 17
  • 1
  • @KK 's comment is all what you need, but for deeper information, visit this link. https://css-tricks.com/almanac/properties/b/backdrop-filter/ – Amini Jun 27 '22 at 05:54
  • I think you will have to change your HTML structure. Is this possible in your case? – A Haworth Jun 27 '22 at 05:56

3 Answers3

0

It's not possible when you have an element inside the element you want to blur. You could use a container element position it relative, place two elements next to each other inside it and position them absolute.

.container {
  position: relative;
  /* style to your needs */
  width: 100px;
  height: 100px;
}

.blur {
  position: absolute;
  
  /* some styling */
  width: 100%;
  height: 100%;
  background: lime;
  filter: blur(5px);
}

.content {
  position: absolute;
  
  /* some styling */
  font-family: sans-serif;
  top: 50%;
  left: 50%;
  transform: translatex(-50%) translatey(-50%);
  margin: 0;
}
<div class="container">
  <div class="blur"></div>
  <p class="content">My not blurred out content</p>
</div>
Der Alex
  • 718
  • 3
  • 16
0

a parent's filter always affect the child, then you can use ::after pseudo element to solve it

.parent {
  width: 100px;
  height: 150px;
  position: relative;
}

.parent::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background-image: url(https://cdn.pixabay.com/photo/2022/06/07/15/56/child-7248693_1280.jpg);
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  z-index: -1;
}

.child {
  z-index: 1;
}
<div class="parent">
  <p class="child">
    text
  </p>
</div>
ANDO Andriamalala
  • 308
  • 1
  • 7
0

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-blur {
  /* background color is light blue */
  background-color: lightblue; 
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="bg-blur"></div>

<div class="bg-text">
  <h2>Blurred Background</h2>
  <h1 style="font-size:50px">I am John Doe</h1>
  <p>And I'm a Photographer</p>
</div>

</body>
</html>

you can refer this link for better understanding...

w3school template for your reference

Alap Joshi
  • 87
  • 1
  • 9