web-dev-qa-db-fra.com

CSS flou sur l’arrière-plan mais pas sur le contenu

J'ai fait cet exemple .

J'essaie de rendre l’arrière-plan flou, mais le contenu principal est également flou (le <span>)

Comment puis-je brouiller l'arrière-plan sans brouiller le contenu?

csscss3background-imageblur
29
itsme

Vous pouvez superposer un élément au-dessus de l’élément flou, comme

DÉMO 

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}
16
Kevin Lynch

jsfiddle

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

Vous pouvez brouiller l'image d'arrière-plan du corps à l'aide de la pseudo-classe avant du corps pour hériter de l'image, puis la rendre floue. Emballez tout cela dans une classe et utilisez javascript pour ajouter et supprimer la classe afin de la rendre floue et non floue.

21
Mike Lee

Ajoutez un autre div ou img à votre principal div et bloquez-le à la place. jsfiddle

.blur {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}
9
TreeTree

jsfiddle .

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

Et ça? Pas de positionnement absolu sur div, mais sur img et span.

2
JMercer

backdrop-filter

Malheureusement, Mozilla a vraiment lâché la balle et pris son temps avec cette fonctionnalité. Personnellement, j'espère que cela fera partie de la prochaine édition de Firefox ESR car c'est ce que la prochaine version majeure de Waterfox utilisera.

Article MDN (Mozilla Developer Network): https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Implémentation de Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765

Depuis la page de documentation MDN:

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
0
John