Блог

Я пытаюсь установить фоновое изображение и размыть фон изображения, а также размыть текст и поле входа, поэтому я не уверен, что здесь не так. пожалуйста, помогите мне

      return (
    
        /*  <AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }} >
           <Router>
        <div >
          <div className="background">
            <div>
              <h1 class="Title">welcome</h1>
            </div>
            {/*  <ul>
                  <li>
                    <Link to="/" >Home Page</Link>
                  </li>
                  <li>
                    <Link to="/admin" > Admin Page </Link>
                  </li>
                </ul>
                <Route exact path="/" component={Home} />
                <Route path="/Login" component={Login} />
                <Route path="/Signup" component={Signup} />
                <PrivateRoute path="/admin" component={Admin} /> */}
          </div>
        </div>
         {/*  </Router>
        </AuthContext.Provider > */}
      );
    }
 

css

  .background {background-image: url("./img/container.jpg");background-repeat: no-repeat;backgroundsize: 71.5% 100%;background-position: left; position: relative;filter: blur(8px) -webkit-filter: blur(8px);}
 

Ваш вопрос не очень понятен. Но я понял, что вы пытаетесь размыть фоновое изображение всякий раз, когда открываете логин и текстовое поле. Если выше ваш вопрос, то,

Вы можете установить z-index для CSS-файла вашего фона и CSS-файла окна входа. Затем вы можете добавить событие onClick на кнопку окна входа, чтобы при каждом нажатии кнопки окна входа фон переключался на размытие, а окно входа отображалось.

Для получения информации о z-индексе: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index