Html Question posted in
Some basic documentation can be found here.

Html – How to use filter on background like background blur or brightness without effecting the text

I am working on a web project and I would like to apply a filter effect, such as background blur or brightness adjustment, to the background of a specific section. However, I want the text within this section to remain unaffected by these filter effects.

The issue I’m encountering is that the filter property is being applied to both the background and the text, whereas I only want the background to be blurred (or have its brightness adjusted) without affecting the text at all.

Here is my HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="item">
          <h1>0</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Here is my css

.main {
  display: flex;
  justify-content: center;
  filter: blur(2px);
}
.container {
  display: flex;
  justify-content: center;
  background-image: url(images/people1.jpg);

  width: 600px;
  height: 400px;
}

.item {
  color: red;
  font-size: 50px;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the answer of above problem:

    .blurred{
  width: 600px;
  height: 300px;
  position: absolute;
  background-image: url(https://blogs.biomedcentral.com/bmcseriesblog/wp-content/uploads/sites/9/2017/12/crowd-620x342.jpg);
  z-index: 0;
  filter: blur(2px) brightness(40%);
}

.home{
  width: 600px;
  height: 300px;
  display: flex;
  justify-content: center;
  position: absolute;
  z-index: 1;
  color: white;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="blurred"></div>
      <div class="home">
        <h1>Page Counter</h1>
      </div>
  </body>
</html>


  2. 0

    The concept here is to separate the background layer and the text layer. You have two options here:

    1. Either have an image tag and place it absolutely positioned (achievable, but not recommended).
    2. Use a Pseudo element such as ::before or ::after, place it absolutely positioned and use z-index to place it behind the text. The Background Image and blur needs to be used in this pseudo element.
    .main {
  display: flex;
  justify-content: center;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/people1.jpg);
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  z-index: 1;
}

.item {
  position: relative;
  color: red;
  font-size: 50px;
  z-index: 2;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search