Funktionen blur

Funktionen blur låter dig oskärpa bakgrundsbilder enligt Gauss.

Syntax

selector {
	filter: blur(oskärpningsstorlek);
}

Exempel

Låt oss sätta en oskärpa på vår bild på 2px:

<div id="elem"></div>

#elem {
	filter: blur(2px);
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Se även

funktionen brightness,
som sätter ljusstyrkan för bakgrunden
funktionen contrast,
som sätter kontrasten för bakgrunden
funktionen drop-shadow,
som sätter en skugga för bakgrunden
funktionen hue-rotate,
som sätter färgnyansen för bakgrunden
funktionen invert,
som inverterar bakgrundens färger
funktionen opacity,
som sätter opaciteten för bakgrunden
funktionen sepia,
som omvandlar bakgrunden till sepia
egenskapen background,
som är en sammanfattande egenskap för bakgrunden
egenskapen background-image,
som används för att sätta en bakgrundsbild för ett element
egenskapen filter,
som sätter stilen för bakgrunden