CSS filter egenskap

Definition and usage

The filter property defines the visual effects of an element (usually <img>), such as blurring and saturation.

See also:

CSS Tutorial:CSS Image

HTML DOM Reference Manual:filter property

Example

Convert all images to black and white (100% gray):

img {
  filter: grayscale(100%);
}

Prova själv

Tips:More TIY examples can be found at the bottom of the page.

CSS syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tips:För att använda flera filter, separera varje filter med ett blanksteg (se fler exempel nedan på sidan).

Tekniska detaljer

Standardvärde: none
Arv: Nej
Animering: Stöd. Se till:Animation relaterade egenskaper。
Version: CSS3
JavaScript-syntax: object.style.filter="grayscale(100%)"

Filterfunktion

Kommentar:Använd procentvärden (t.ex. 75%) för filter, accepterar också att värdet är decimal (t.ex. 0.75).

Filter Beskrivning
none Standardvärde. Specificera ingen effekt.
blur(px)

Applicera en suddighetseffekt till bilden. Större värden skapar mer suddighet.

Om ett specifikt värde inte är specificerat, används 0.
brightness(%)

Justera bildens ljusighet.

  • 0% kommer att göra bilden helt svart.
  • Standardvärdet är 100%, vilket representerar den ursprungliga bilden.
  • Värden över 100% ger ett ljusare resultat.
contrast(%)

Justera bildens kontrast.

  • 0% kommer att göra bilden helt svart.
  • Standardvärdet är 100%, vilket representerar den ursprungliga bilden.
  • Värden över 100% ger ett mer kontrastrikt resultat.
drop-shadow(h-shadow v-shadow blur spread color)

Applicera skugga till bilden.

Möjliga värden:

  • h-shadow - nödvändigt. Specificera pixelvärdet för den horisontella skuggan. Negativa värden kommer att placera skuggan till vänster om bilden.
  • v-shadow - nödvändigt. Specificera pixelvärdet för den vertikala skuggan. Negativa värden kommer att placera skuggan ovanför bilden.

blur - valfritt. Detta är det tredje värdet, enheten måste vara i pixlar. Lägg till en suddighetseffekt till skuggan. Ju högre värdet desto mer suddighet skapas (skuggan blir större och ljusare). Negativa värden är inte tillåtna. Om värdet inte specificeras, används 0 (skuggans kant är mycket skarp).

spread - valfritt. Detta är den fjärde värdet, enheten måste vara i pixlar. Positiva värden kommer att göra skuggan expanderande och större, negativa värden kommer att göra skuggan mindre. Om värdet inte specificeras, används 0 (skuggan är lika stor som elementet).

Kommentar:Chrome, Safari och Opera, kanske också andra webbläsare, stöder inte den fjärde längden; om den läggs till, kommer den inte att visas.

color - valfritt. Lägg till färg till skuggan. Om inte specificerad, beror färgen på webbläsaren (vanligtvis svart).

Detta exempel skapar en röd skugga med en horisontell och vertikal storlek på 8px, med en suddighetseffekt på 10px:

filter: drop-shadow(8px 8px 10px red);

Tips:Denna filter är liknande box-shadow-attributet.
grayscale(%)

Konvertera bilden till gråskala.

  • 0% (0) är standardvärdet, vilket representerar den ursprungliga bilden.
  • 100% kommer att göra bilden helt grå (används för svartvita bilder).

Kommentar:Negativa värden är inte tillåtna.
hue-rotate(deg)

Applicera färgskalan på bilden. Detta värde definierar grader på färgcirkeln. Standardvärdet är 0deg, vilket representerar den ursprungliga bilden.

Kommentar:Maxvärdet är 360deg.
invert(%)

Vänd om proverna i bilden.

  • 0% (0) är standardvärdet, vilket representerar den ursprungliga bilden.
  • 100% kommer att göra bilden helt omvänd.

Kommentar:Negativa värden är inte tillåtna.
opacity(%)

Ställ in bildens genomskinlighetsnivå. opacity-level beskriver genomskinlighetsnivån, där:

  • 0% är helt genomskinlig.
  • 100% (1) är standardvärdet, vilket representerar den ursprungliga bilden (genomskinlig).

Kommentar:Negativa värden är inte tillåtna.

Tips:Denna filter är liknande opacity-attributet.
saturate(%)

Ställ in bildens mättnad.

  • 0% (0) kommer att göra bilden helt otillsatt.
  • 100% är standard och representerar den ursprungliga bilden.
  • Values över 100% ger övertonsade resultat.

Kommentar:Negativa värden är inte tillåtna.
sepia(%)

Konvertera bilden till mörkbrun.

  • 0% (0) är standardvärdet, vilket representerar den ursprungliga bilden.
  • 100% kommer att göra bilden helt mörkbrun.

Kommentar:Negativa värden är inte tillåtna.
url()

url() funktionen accepterar positionen för en XML-fil som definierar SVG-filter och kan innehålla en ankerpunkt till ett specifikt filterelement. Exempel:

filter: url(svg-url#element-id)
initial Sätt denna egenskap till dess standardvärde. Se initial。
inherit Inheritera denna egenskap från föräldrelementet. Se inherit。

Mer exempel

Suddighetsexempel

Lägg till suddighetseffekt på bilden:

img {
  filter: blur(5px);
}

Prova själv

Suddig exempel 2

Applicera suddig bakgrundsbild:

img.background {
  filter: blur(35px);
}

Prova själv

Ljusstyrkeexempel

Justera bildens ljusstyrka:

img {
  filter: brightness(200%);
}

Prova själv

Kontrastexempel

Justera bildens kontrast:

img {
  filter: contrast(200%);
}

Prova själv

Skuggexempel

Applicera skuggverk på bilden:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Prova själv

Gråskaleexempel

Konvertera bilden till gråskala:

img {
  filter: grayscale(50%);
}

Prova själv

Färgskiftningsexempel

Applicera färgskiftning på bilden:

img {
  filter: hue-rotate(90deg);
}

Prova själv

Inverteringsexempel

Invertera provet i bilden:

img {
  filter: invert(100%);
}

Prova själv

Genomskinlighetsexempel

Ställ in bildens genomskinlighetnivå:

img {
  filter: opacity(30%);
}

Prova själv

Saturationsexempel

Justera bildens saturation:

img {
  filter: saturate(800%);
}

Prova själv

Sepia-exempel

Konvertera bilden till sepia:

img {
  filter: sepia(100%);
}

Prova själv

Använd flera filter

För att använda flera filter, separera varje filter med blanksteg.Observera att ordningen är viktig (t.ex. använd grayscale() efter sepia() skapar en helt grå bild):

img {
  filter: contrast(200%) brightness(150%);
}

Prova själv

Alla filter

Demonstrera alla filterfunktioner:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Prova själv

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullständigt stöder egenskapen.

Siffror med -webkit- indikerar den första versionen som använder prefixet.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Kommentar:Äldre versioner av Internet Explorer (4.0 till 8.0) stöder det föråldrade icke-standard "filter"-egenskapen. När stöd för IE8 och äldre versioner behövs, används den huvudsakligen för ogenomskinlighet.