CSS
Filtrera egendom
Sök…
Syntax
- filter: ingen (standardvärde)
- filter: initial (standard är ingen);
- filter: ärva (standardvärde för föräldrar);
- filter: oskärpa (px)
- filter: ljusstyrka (antal |%)
- filter: kontrast (antal |%)
- filter: drop-skugga (horisontell-skugga-px vertikal-skugga-px skugga-oskärpa-px skugga - sprida färg)
- filter: gråskala (antal |%)
- filter: nyans-rotera (deg)
- filter: invertera (antal |%)
- filter: opacitet (antal |%)
- filter: mättat (antal |%)
- filter: sepia (antal |%)
parametrar
| Värde | Beskrivning |
|---|---|
| oskärpa (x) | Oskarpa bilden med x pixlar. |
| ljusstyrka (x) | Ljusare bilden med valfritt värde över 1,0 eller 100%. Under detta blir bilden mörkare. |
| kontrast (x) | Ger mer kontrast till bilden vid valfritt värde över 1,0 eller 100%. Under det kommer bilden att bli mindre mättad. |
| drop-skugga (h, v, x, y, z) | Ger bilden en droppskugga. h och v kan ha negativa värden. x, y och z är valfria. |
| gråskala (x) | Visar bilden i gråskala med ett maximivärde av 1,0 eller 100%. |
| nyans-rotera (x) | Tillämpar en nyansrotation på bilden. |
| invertsocker (x) | Inverterar bildens färg med ett maximivärde av 1,0 eller 100%. |
| opacitet (x) | Ställer in hur ogenomskinlig / transparent bilden är med ett maximivärde av 1,0 eller 100%. |
| mättad (x) | Mättar bilden vid valfritt värde över 1,0 eller 100%. Under det kommer bilden att mättas. |
| sepia (x) | Konverterar bilden till sepia med ett maximivärde av 1,0 eller 100%. |
Anmärkningar
Eftersom filter är en experimentell funktion bör du använda prefixet -webkit. Det kan förändras i syntax och beteende, men förändringarna kommer förmodligen att bli små.
Det kanske inte stöds i äldre versioner av stora webbläsare. Det kanske inte stöds i mobila webbläsare.
På grund av dess relativt begränsade stöd kan du försöka använda
box-shadowistället förfilter: drop-shadow(). Användopacityistället förfilter: opacity().Det kan animeras genom Javascript / jQuery. För Javascript, använd
object.style.WebkitFilter.W3Schools har också en demosida för alla olika filtervärden.
Släpp skugga (använd ruta-skugga istället om möjligt)
html
<p>My shadow always follows me.</p>
CSS
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
Resultat
Flera filtervärden
Om du vill använda flera filter ska du separera varje värde med ett mellanslag.
html
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
Resultat
Nyans rotera
html
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Resultat
Invertera färg
html
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Resultat
Förvandlas från vit till svart.
Fläck
html
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Resultat
Gör att du vill gnugga dina glasögon.
