Skip to main content
se añadieron 42 caracteres en el cuerpo; título editado
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

Como hacer desenfocada ¿Cómo desenfocar solo la imagen de un background-image?

tengoTengo una imagen para un fondo del bodybody en mi sitio y quiero aplicar un poco de desenfoque, resulta que cuando aplico la propiedad blurblur me desenfoca todos los div y mis containercontainer, pero no el bodybody.

body{ background-image: url("ruta"); filter: blur(6px); }

body{
    background-image: url("ruta");
    filter: blur(6px);
}
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Logo</h1>
            </div>
        </div>
    </div>
</body>
<body>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>
 

También probé agregando con un classclass en csscss, pero no me funciona.

.fondo-body{
background-image: url("ruta");
filter: blur(6px);

}

.fondo-body{
    background-image: url("ruta");
    filter: blur(6px);
}
<body class="fondo-body">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Logo</h1>
            </div>
        </div>
    </div>
</body>
<body class="fondo-body">
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>
 

Como hacer desenfocada solo la imagen de un background-image?

tengo una imagen para un fondo del body en mi sitio y quiero aplicar un poco de desenfoque, resulta que cuando aplico la propiedad blur me desenfoca todos los div y mis container, pero no el body.

body{ background-image: url("ruta"); filter: blur(6px); }

<body>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>

También probé agregando con un class en css, pero no me funciona.

.fondo-body{
background-image: url("ruta");
filter: blur(6px);

}

<body class="fondo-body">
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>

¿Cómo desenfocar solo la imagen de un background-image?

Tengo una imagen para un fondo del body en mi sitio y quiero aplicar un poco de desenfoque, resulta que cuando aplico la propiedad blur me desenfoca todos los div y mis container, pero no el body.

body{
    background-image: url("ruta");
    filter: blur(6px);
}
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Logo</h1>
            </div>
        </div>
    </div>
</body>
 

También probé agregando con un class en css, pero no me funciona.

.fondo-body{
    background-image: url("ruta");
    filter: blur(6px);
}
<body class="fondo-body">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Logo</h1>
            </div>
        </div>
    </div>
</body>
 

Origen Enlace

Como hacer desenfocada solo la imagen de un background-image?

tengo una imagen para un fondo del body en mi sitio y quiero aplicar un poco de desenfoque, resulta que cuando aplico la propiedad blur me desenfoca todos los div y mis container, pero no el body.

body{ background-image: url("ruta"); filter: blur(6px); }

<body>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>

También probé agregando con un class en css, pero no me funciona.

.fondo-body{
background-image: url("ruta");
filter: blur(6px);

}

<body class="fondo-body">
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>