Χρώματα CSS

CSS Support More than 140 color namesas well as hexadecimal values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA color

The RGBA color value is an extension of the RGB color value, with an alpha channel - this channel specifies the opacity of the color.

The RGBA color value is defined as: rgba(red, green, blue, alpha) alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following examples define different RGBA colors:

Παράδειγμα

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Semi-transparent red */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Semi-transparent green */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Semi-transparent blue */

Προσπάθησε να το δοκιμάσεις

HSL color

HSL refers to hue, saturation, and lightness (Hue, Saturation, and Lightness).

The HSL color value is defined as: hsl(hue, saturation, lightness).

The hue is the degree on the color wheel (from 0 to 360):

  • 0 (or 360) is red
  • 120 is green
  • 240 is blue

Saturation is a percentage value: 100% is full color.

The brightness is also a percentage value: 0% is dark (black), and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Παρακάτω είναι παραδείγματα διαφόρων χρωμάτων HSL:

Παράδειγμα

#p1 {background-color: hsl(120, 100%, 50%);}  /* Πράσινη */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Ελαφριά πράσινη */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Σκούρα πράσινη */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Ελαφριά πράσινη */

Προσπάθησε να το δοκιμάσεις

Χρώματα HSLA

Οι τιμές χρωμάτων HSLA είναι επέκταση των τιμών χρωμάτων HSL με Alpha κανάλι - ορίζουν την αδιαφάνεια του χρώματος.

Οι τιμές χρωμάτων HSLA καθορίζονται από τους παρακάτω παράμερους: hsla(χρώμα, πυκνότητα, φωτεινότητα, αδιαφάνεια)，όπου η παράμετρος αδιαφάνειας ορίζει την αδιαφάνεια. Η παράμετρος αδιαφάνειας είναι αριθμός που βρίσκεται μεταξύ 0.0 (πλήρως διαφανής) και 1.0 (πλήρως αδιαφανής).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Παρακάτω είναι παραδείγματα διαφόρων χρωμάτων HSLA:

Παράδειγμα

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Πράσινη με αδιαφάνεια */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Ελαφριά πράσινη με αδιαφάνεια */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Σκούρα πράσινη με αδιαφάνεια */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Ελαφριά πράσινη με αδιαφάνεια */

Προσπάθησε να το δοκιμάσεις

不透明度

CSS α 属性设置整个元素的不透明度（背景颜色和文本都将是不透明/透明的）。

α 属性值必须是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

rgb(255, 0, 0); α:0.2;
rgb(255, 0, 0); α:0.4;
rgb(255, 0, 0);διαφάνεια:0.6;
rgb(255, 0, 0);διαφάνεια:0.8;

Λάβετε υπόψη ότι και το κείμενο παραπάνω θα είναι διαφανές/μη διαφανές!

Το παρακάτω παράδειγμα δείχνει διαφορετικά στοιχεία με διαφάνεια:

Παράδειγμα

#p1 {χρώμα�:rgb(255,0,0);διαφάνεια:0.6;}  /* Κόκκινο με διαφάνεια */
#p2 {χρώμα�:rgb(0,255,0);διαφάνεια:0.6;}  /* Γραμμές με διαφάνεια */
#p3 {χρώμα�:rgb(0,0,255);διαφάνεια:0.6;}  /* Μπλε με διαφάνεια */

Προσπάθησε να το δοκιμάσεις