webentwicklung-frage-antwort-db.com.de

CSS verwischt das Hintergrundbild, aber nicht den Inhalt

Ich habe dieses Beispiel .

Ich versuche, das Hintergrundbild zu verwischen, aber der Hauptinhalt ist auch verwischt (das <span>)

Wie kann ich den Hintergrund verwischen, ohne den Inhalt zu verwischen?

csscss3background-imageblur
29
itsme

Sie können ein Element wie folgt über das verschwommene Element legen

DEMO 

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;
}

Sie können das Hintergrundbild des Körpers mithilfe der Pseudoklasse: before verwischen, um das Bild zu erben und es dann zu verwischen. Binden Sie all das in eine Klasse ein und verwenden Sie Javascript, um die Klasse hinzuzufügen und zu entfernen, damit sie unscharf und unscharf wird.

21
Mike Lee

Fügen Sie eine weitere div oder img zu Ihrer Haupt-div hinzu und verwischen Sie diese stattdessen. 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>

Was ist damit? Keine absolute Positionierung auf div, sondern auf img und span.

2
JMercer

backdrop-filter

Leider hat Mozilla den Ball wirklich fallen lassen und sich mit dem Feature Zeit genommen. Ich persönlich hoffe, es schafft es bis zum nächsten Firefox-ESR, da dies in der nächsten Hauptversion von Waterfox verwendet wird.

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

Mozilla-Implementierung: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765

Auf der MDN-Dokumentationsseite:

/* 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