Blur-funktionen

Funktionen blur giver mulighed for at sløre baggrundsbilleder ved hjælp af Gaussisk sløring.

Syntaks

selektor {
	filter: blur(sløringsstørrelse);
}

Eksempel

Lad os indstille en sløring på 2px for vores billede:

<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 også

funktionen brightness,
der indstiller lysstyrken for baggrunden
funktionen contrast,
der indstiller kontrasten for baggrunden
funktionen drop-shadow,
der tilføjer en skygge til baggrunden
funktionen hue-rotate,
der justerer farvetonen for baggrunden
funktionen invert,
der inverterer baggrundens farver
funktionen opacity,
der indstiller gennemsigtigheden for baggrunden
funktionen sepia,
der omdanner baggrunden til sepia
egenskaben background,
som er en sammentrukken egenskab for baggrunden
egenskaben background-image,
der bruges til at tilføje et baggrundsbillede til et element
egenskaben filter,
der definerer en stil for baggrunden