GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Apllicando filtro ao background blur()

front-end
css
Tags: #<Tag:0x00007f4d9f79c180> #<Tag:0x00007f4d9f79bf50>

#1

Olá,

Estou querendo aplicar um efeito ao meu background. Para ser mais específico desfocar a imagem do meu background.
Olhei no site do Maujor e lá tem post utilizando filter para imagem adicionadas via html. Tem alguma forma de aplicar esse efeito ao background direto ou eu terei que aplicar o filtro no photoshop para então adicionar ao meu site??

Obrigado!!!


#2

Então Arthur, você pode adicionar um ID ou um CLASS ao seu elemento BACKGROUND e estiliza-lo com o FILTER do CSS, não precisa necessariamente usar PHOTOSHOP.

.bkc_image {
filter: blur(2);
}

Espero ter ajudado


#3

Eu apliquei o background via CSS.
Eu posso aplicar o filtro à um background deste tipo?


#4
<style>
.background-image {
    background-repeat:no-repeat;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;

    display: block;
    background-image: url('https://cdn.pixabay.com/photo/2014/12/21/17/02/night-575008_960_720.jpg');
    height: 1000px;
    width: 1500px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);

}
.conteudo {
    left: 0;
    right: 0;
    z-index: 9999;
    position: fixed;
    margin-left: 120px;
    margin-right: 50px;
    color:#fff;
}
</style>
    <div class="background-image"></div>
    <div class="conteudo">
    <h2>APLICANDO EFEITO BLUR CSS3 EM BACKGROUND-IMAGE</h2>
    </div>

Assim?