λειτουργία CSS linear-gradient()

Ορισμός και χρήση

CSS linear-gradient() λειτουργία που χρησιμοποιείται για τη δημιουργία γραμμικής διαβάθμισης ως υποβάθρω.

Για να δημιουργήσετε γραμμική διαβάθμιση, πρέπει να καθορίσετε τουλάχιστον δύο δείκτες χρώματος. Ο δείκτης χρώματος είναι το χρώμα που θέλετε να επιτύχετε π平滑过渡 μεταξύ τους. Μπορείτε επίσης να ρυθμίσετε τον αρχικό σημείο και την κατεύθυνση (ή γωνία) και την επιφάνεια διαβάθμισης.

παράδειγμα γραμμικής διαβάθμισης:

παράδειγμα

παράδειγμα 1

Αυτή η γραμμική διαβάθμιση ξεκινά από την κορυφή. Από το κόκκινο过渡到黄色, και μετά να το μπλε:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

亲自试一试

παράδειγμα 2

μια γραμμική διαβάθμιση που ξεκινά από την αριστερή πλευρά. Από το κόκκινο过渡到蓝色:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

亲自试一试

παράδειγμα 3

μια γραμμική διαβάθμιση που ξεκινά από το κάτω αριστερό γωνία (και επεκτείνεται προς το κάτω δεξιό γωνία):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

亲自试一试

παράδειγμα 4

μια γραμμική διαβάθμιση που καθορίζει γωνία:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

亲自试一试

παράδειγμα 5

μια γραμμική διαβάθμιση που περιλαμβάνει πολλούς δείκτες χρώματος:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

亲自试一试

例子 6

一个具有两个位置色标的线性渐变：

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

亲自试一试

例子 7

一个具有透明度的线性渐变：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

亲自试一试

CSS 语法

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

教程：CSS 渐变

Παρατηρήσεις:Ιδιότητα background-image για το CSS

Παρατηρήσεις:CSS conic-gradient() 函数

Παρατηρήσεις:CSS radial-gradient() 函数

Παρατηρήσεις:CSS repeating-conic-gradient() 函数

Παρατηρήσεις:CSS repeating-linear-gradient() 函数

Παρατηρήσεις:Λειτουργία CSS repeating-radial-gradient()