Rumah >hujung hadapan web >tutorial css >Meneroka warna dalam CSS
<p>
perenggan), anda boleh mengubah warna teksnya menggunakan harta color
:
<code class="language-css">p { color: red; }</code><p> Begitu juga, harta
background-color
mengubah latar belakang elemen:
<code class="language-css">p { background-color: darkorange; }</code><p> manakala CSS menyokong nama warna biasa seperti "merah" dan "darkorange," ia tidak merangkumi setiap warna yang mungkin. Untuk kawalan warna yang tepat, model warna RGB, HEX, dan HSL menawarkan fleksibiliti yang lebih besar.
rgb()
mentakrifkan warna RGB:
<code class="language-css">rgb(<red>, <green>, <blue>)</code><p> Setiap parameter (
red
, green
) menerima nilai integer antara 0 dan 255, yang mewakili intensiti setiap komponen warna. 0 menunjukkan keamatan yang paling lemah, dan 255 yang paling kuat. Contohnya: blue
<code class="language-css">p { color: rgb(255, 0, 0); /* Equivalent to color: red; */ }</code>Menggabungkan intensiti yang berbeza mencipta pelbagai warna: <p>
<code class="language-css">p { color: rgb(168, 189, 45); }</code>Alat pemetik warna sangat disyorkan untuk memilih nilai RGB secara visual, kerana ia mencabar untuk meramalkan warna yang terhasil dari nilai berangka sahaja. <p> <p>
rgba()
rgb()
parameter <code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>(0.0 hingga 1.0) mengawal ketelusan; 0.0 adalah telus sepenuhnya, dan 1.0 adalah legap sepenuhnya: <p>
alpha
<code class="language-css">p { color: rgba(167, 189, 45, 0.408); }</code>
<code class="language-css">#rrggbb</code>, <p>,
#
) mewakili komponen merah, hijau, dan biru, masing -masing, dari 00 (0 perpuluhan) hingga FF (255 perpuluhan). Contohnya: rr
gg
Ketelusan boleh ditambah menggunakan kod hex lapan digit: bb
<code class="language-css">p { color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */ }</code><p> mewakili saluran alfa (00 hingga FF, pemetaan hingga 0.0 hingga 1.0).
<code class="language-css">#rrggbbaa</code><p> ini bersamaan dengan
aa
.
<code class="language-css">p { color: #a7bd2d68; }</code><p>
hsl()
menggunakan:
<code class="language-css">p { color: red; }</code><p>
hue
mewakili kedudukan warna pada roda warna (0 hingga 360 darjah).
<p> saturation
<p> lightness
hsla()
Ini bersamaan dengan <code class="language-css">p { background-color: darkorange; }</code>dan
<code class="language-css">rgb(<red>, <green>, <blue>)</code>. <p>
#a7bd2d68
Eksplorasi lanjut rgba(167, 189, 45, 0.408)
Atas ialah kandungan terperinci Meneroka warna dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!