Rumah > hujung hadapan web > tutorial css > Apakah fungsi saluran warna dalam Less?

Apakah fungsi saluran warna dalam Less?

WBOY
Lepaskan: 2023-08-26 17:37:09
ke hadapan
1231 orang telah melayarinya

Less 中的颜色通道函数有哪些?

LESS (Pelajar CSS) ialah prapemproses yang dibangunkan di atas CSS biasa, membolehkan pembangun menyelenggara dan menyesuaikan kod CSS dengan mudah. Sebagai contoh, ia membolehkan mencipta pembolehubah dan fungsi dalam kod CSS. Oleh itu, pembangun tidak perlu menulis kod pendua seperti yang biasa kita lakukan dalam CSS biasa.

Fungsi saluran warna juga merupakan satu lagi ciri penting Less, yang mengambil nilai warna sebagai input dan mengembalikan nilai saluran warna tertentu.

Dalam tutorial ini, kita akan mempelajari tentang 12 fungsi saluran warna dalam Kurang melalui contoh. Ini ialah senarai semua fungsi saluran warna.

  • Fungsi Merah()

  • Fungsi hijau()

  • Fungsi Biru()

  • Fungsi Alpha()

  • Fungsi Hue()

  • Fungsi Ketepuan()

  • Fungsi Kecerahan()

  • Fungsi Hsvhue()

  • Fungsi Hsvsaturation()

  • Hsvvalue() fungsi

  • Fungsi Luma()

  • Fungsi Pencahayaan()

Fungsi Merah()

red() ialah fungsi saluran warna pertama dalam senarai kami. Ia memerlukan nilai warna sebagai hujah dan mengembalikan nilai antara 0 dan 255, iaitu keamatan merah dalam warna semasa.

Contoh

Dalam contoh di bawah, kami menyimpan nilai rgb oren sebagai nilai pembolehubah "mycolor". Selepas itu, kami menggunakan fungsi red() dengan menghantar "myclor" sebagai parameter dan menyimpan nilai pulangan dalam pembolehubah "redchannle".

Dalam output, pengguna boleh melihat bahawa nilai pembolehubah "redchannle" ialah 255.

@mycolor: rgb(255, 165, 0);
@redchannel: red(@mycolor);
.element {
   background-color: @redchannel;
}
Salin selepas log masuk

Output

.element {
   background-color: 255;
}
Salin selepas log masuk

Fungsi hijau()

hijau() berada di tempat kedua dalam senarai fungsi saluran kurang warna kami. Ia menerima nilai warna dan mengembalikan keamatan hijau antara 0 dan 255.

Contoh

Dalam contoh di bawah, kami menyimpan nilai warna RGB dalam pembolehubah "warna saya". Kami sentiasa menulis keamatan hijau sebagai hujah kedua kepada kaedah rgb().

Kami menggunakan fungsi hijau() untuk mendapatkan nilai saluran warna hijau daripada nilai rgb, dan dalam output, kami dapat melihat bahawa ia mengembalikan 15.

@mycolor: rgb(0, 15, 0);
@greenchannel: green(@mycolor);
.element {
   color: @greenchannel;
}
Salin selepas log masuk

Output

.element {
   color: 15;
}
Salin selepas log masuk

fungsi biru()

Fungsi

blue() mengembalikan nilai saluran biru yang dikaitkan dengan warna yang diluluskan sebagai hujah.

Pengguna boleh mengikuti contoh di bawah untuk menggunakan fungsi blue() dalam kurang.

Contoh

Di sini kami menghantar nilai warna heksadesimal "#FF5733" sebagai parameter fungsi biru(), iaitu warna oren.

Output menunjukkan 51 sebagai nilai saluran biru, yang bermaksud keamatan biru dalam warna tertentu ialah 51.

@bluechannel: blue(#FF5733);
.output {
   color: @bluechannel;
}
Salin selepas log masuk

Output

.output {
   background-color: 51;
}
Salin selepas log masuk

Fungsi Alpha()

Seperti namanya, fungsi alpha() digunakan untuk mendapatkan kelegapan warna semasa, yang mewakili nilai saluran alfa.

Dalam format warna rgba(), kami lulus nilai alfa sebagai parameter terakhir.

Contoh

Pembolehubah "warna" dalam contoh di bawah menyimpan nilai warna rgba. Di sini kita menghantar "0.9" sebagai nilai saluran alfa dalam rgba.

Kami menggunakan fungsi alpha() untuk mendapatkan kelegapan "warna" dan ia mengembalikan 0.9 seperti yang dapat kita lihat dalam output.

@color: rgba(25, 77, 91, 0.9);
@alphachannel: alpha(@color);
.output {
   opacity: @alphachannel;
}
Salin selepas log masuk

Output

.output {
   opacity: 0.9;
}
Salin selepas log masuk

Fungsi Hue()

Fungsi

hue() digunakan untuk mendapatkan nilai rona warna tertentu. Ia mengembalikan sudut rona warna pada roda warna, dengan nilai antara 0 dan 360.

Contoh

Dalam contoh, kami menyimpan nilai RGB dalam pembolehubah "warna". Selepas itu, kami menggunakan fungsi hue() untuk mendapatkan nilai hue warna semasa.

Kami menggunakan nilai warna apabila mentakrifkan warna menggunakan hsl(). Fungsi Hue() mengembalikan nilai warna rgb(34, 9, 0) 16.

@color: rgb(34, 9, 0);
@huevalue: hue(@color);
.element {
   color: hsl(@huevalue, 100%, 50%);
}
Salin selepas log masuk

Output

.element {
   color: hsl(16, 100%, 50%);
}
Salin selepas log masuk

Fungsi Ketepuan()

Fungsi

saturation() mengembalikan nilai ketepuan warna yang diluluskan sebagai hujah, antara 0 hingga 100%.

Contoh

Dalam contoh ini, kami mengambil warna rgb(34, 9, 76) untuk mendapatkan nilai tepunya. Di sini, kami melaksanakan fungsi tepu() dalam kaedah hsl() untuk mendapatkan nilai tepu warna semasa.

Dalam output kita dapat perhatikan bahawa ia mengembalikan 78.8% sebagai nilai tepu

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, saturation(@color), 50%);
}
Salin selepas log masuk

Output

.element {
   color: hsl(21, 78.8%, 50%);
}
Salin selepas log masuk

Fungsi Kecerahan()

Fungsi

brightness() digunakan untuk mendapatkan kecerahan fungsi tertentu. Ia mengembalikan nilai antara 0% dan 100%.

Contoh

Di sini, kami mendapat nilai kecerahan warna rgb(34, 9, 76) dan menggunakannya apabila mentakrifkan warna lain menggunakan kaedah hsl(). Dalam output, pengguna boleh melihat bahawa kaedah Brightness() mengembalikan nilai 16.7%.

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, 78.8%, brightness(@color));
}
Salin selepas log masuk

Output

.element {
   color: hsl(21, 78.8%, 16.7%);
}
Salin selepas log masuk

Fungsi Hsvhue()

Fungsi

hsvhue() digunakan untuk mendapatkan nilai rona dalam model warna hsv.

Contoh

Dalam contoh ini, kita mendapat nilai hue dalam model hsv menggunakan fungsi hsvhue(), yang mengembalikan nilai antara 0 dan 360. Dalam output, kita dapat melihat bahawa ia mengembalikan nilai warna 16.

@ hsvhueValue: hsvhue(rgb(255, 87, 51);
.demo {
   background-color: hsv(@hsvhueValue, 70%,60%);
}
Salin selepas log masuk

Output

.demo {
   background-color: hsv(16, 70%, 60%);
}
Salin selepas log masuk

Fungsi Hsvsaturation()

Fungsi

hssaturation() digunakan untuk mendapatkan nilai tepu dalam model warna hsv.

Contoh

Dalam contoh ini, kami menggunakan fungsi hsvsaturation() dengan menghantar nilai warna sebagai parameter. Dalam output, kita dapat melihat bahawa ia mengembalikan tepu 100%.

@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, @hsvsaturationValue,80%);
}
Salin selepas log masuk

输出

.demo {
   background-color: hsv(65, 100%, 80%);
}
Salin selepas log masuk

Hsvvalue() 函数

hsvalue()函数用于获取hsv颜色模型中的亮度值。

示例

这里,我们使用 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%,我们可以在输出中看到。

@hsvvalue: hsvvalue(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, 90%, @hsvvalue);
}
Salin selepas log masuk

输出

.demo {
   background-color: hsv(65, 90%, 100%);
}
Salin selepas log masuk

Luma() 函数

luma() 函数用于通过伽马校正获取特定值的亮度值。它返回 1 到 100 之间的值。

示例

在下面的示例中,我们使用 luma() 函数获取经过伽玛校正的 rgb(50, 250, 150) 颜色的亮度值。在输出中,我们可以看到它返回了 71.251% 的值。

.demo {
   background: luma(rgb(50, 250, 150));
}
Salin selepas log masuk

输出

.demo {
   Background: 71.251%
}
Salin selepas log masuk

亮度()函数

luminance() 函数还用于获取特定值的亮度值,但不进行伽玛校正。

示例

在这个例子中,我们使用luminance()函数来获取没有伽马校正的rgb(50,250,150)颜色的亮度值。用户可以观察相同颜色值的luma()和luminance()函数的输出值之间的差异。

.demo {
   background: luminance(rgb(50, 250, 150));
}
Salin selepas log masuk

输出

.demo {
  Background: 78.533 %
}
Salin selepas log masuk

Atas ialah kandungan terperinci Apakah fungsi saluran warna dalam Less?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan