html/css hintergrund verschwommen machen mit filter: blur()?
ich habe bei der css datei:
body{
background-image:url(background.gif) ;
genommen und logischerweise wird die navigation oben von der website auch verschwommen, wenn ich filter: blur() eingebe. wie mache ich dies nur für den hintergrund?
3 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML
Theoretisch so:
Aber auf Grund des quasi nicht vorhandenen Browser-Supports hast Du nur die Möglichkeit den Hintergrund in einem Pseudo-Element zu hinterlegen und dieses unscharf zu machen. Also:
body:before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100;
background-image:url(background.gif);
filter: blur();
}
Woher ich das weiß:Berufserfahrung
muss ich dafür in der css datei das alte: body {...} löschen ?
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
Wenn es Dir darum geht, den Hintergrund abzusoften, hilft vielleicht auch diese Lösung:
<!doctype html>
<title>Hintergrund absoftgen</title>
<style>
body {
background: url(bild.jpg) center center no-repeat;
background-size: cover;
font-size: 128px;
height: 100vH;
margin: 0;
}
body::before {
width: 100vW;
height: 100vH;
background: white;
opacity: 0.8;
content: "";
display: block;
position: absolute;
}
div {
position:relative;
}
</style>
<div>hello world</div>
Alex
Nutzer, der sehr aktiv auf gutefrage ist
backdrop-filter: blur(x)
https://developer.mozilla.org/de/docs/Web/CSS/backdrop-filter
ich glaube sie haben bei " height: 100;" die "%" vergessen oder?