1

Por que el filtro de CSS afecta al texto y no a la imagen, el background esta dentro del body, o es el mismo body, como consigo aplicar este filtro solo a el background? Alguna manera de manejar el backgroun aparte, ya intente ponerlo como etiqueta en el body e igual se modifica todo el texto y no la imagen.

.titulo{
  font-family: 'Rokkitt', serif;
  text-align: center;
  margin-top: 5%;
  overflow: hidden;
  font-size: 50px;
}
<!DOCTYPE html>
<html class="window"lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="css/estilo.css" rel="stylesheet" type="text/css">
    <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">
    <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
  </head>
  <body>
    <style>
    body {
      background: url("http://i.imgur.com/yqPxEl7.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(0.1rem);
    }
    </style>
    <div class="titulo">
      <h1>Sample text</h1>
    </div>
  </body>
</html>

2 respuestas 2

-1

Me parece que el fallo es que estás asignando blur() a el elemento <body>, pero al background no.

1
  • Y como podria solucionar eso? Commented el 24 may. 2019 a las 5:56
-2

body {
  font-family: "Arial";
  color: #fff;
}

.page-bg {
  background: url('http://i.imgur.com/yqPxEl7.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(0.1rem);
  -moz-filter: blur(0.1rem);
  -o-filter: blur(0.1rem);
  -ms-filter: blur(0.1rem);
  filter: blur(0.1rem);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.titulo{
  font-family: 'Rokkitt', serif;
  text-align: center;
  margin-top: 5%;
  overflow: hidden;
  font-size: 50px;
}
<!DOCTYPE html>
<html class="window" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="css/estilo.css" rel="stylesheet" type="text/css">
    <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">
    <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="page-bg"> <!-- No colocar contenido --></div>
    <h1 class="titulo">This is a title</h1>
  </body>
</html>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.