CSS linear-gradiënt() Funksie
Voorbeeld
Hierdie lineêre gradiënt begin aan die bokant. Dit begin rooi, gaan oor na geel, dan na blou:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die linear-gradient()-funksie stel 'n lineêre gradiënt as die agtergrondprent.
Om 'n lineêre gradiënt te skep, moet jy ten minste twee kleurstops definieer. Kleurstoppe is die kleure waartussen jy gladde oorgange wil gee. Jy kan ook 'n beginpunt en 'n rigting (of 'n hoek) saam met die gradiënteffek stel.
Voorbeeld van lineêre gradiënt:
Weergawe: | CSS3 |
---|
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die funksie ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz-, of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS-sintaksis
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Meer voorbeelde
Voorbeeld
’n Lineêre gradiënt wat van links begin. Dit begin rooi en gaan oor na blou:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Voorbeeld
’n Lineêre gradiënt wat links bo begin (en regs onder gaan):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Voorbeeld
'n Lineêre gradiënt met 'n gespesifiseerde hoek:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Voorbeeld
'n Lineêre gradiënt met veelvuldige kleurstoppe:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Voorbeeld
'n Lineêre gradiënt met deursigtigheid:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Verwante bladsye
CSS-tutoriaal: CSS-gradiënte