Bolehkah Kecerunan CSS3 Menggabungkan Ketelusan?

Kecerunan CSS3 dengan Warna Telus

CSS3 menyediakan alatan berkuasa untuk mencipta kesan visual, termasuk rgba untuk ketelusan dan kecerunan untuk mencipta peralihan warna. Adakah mungkin untuk menggabungkan kedua-dua teknik ini untuk mencipta kecerunan dengan tahap ketelusan yang berbeza-beza?

Jawapan:

Ya, adalah mungkin untuk menggabungkan rgba dan kecerunan dalam CSS moden spesifikasi. Begini caranya:

• WebKit/Safari: Gunakan sintaks -webkit-gradient dengan nilai rgba dalam kedua-dua parameter from() dan to().

background-image: -webkit-gradient(
  linear, left top, left bottom,
  from(rgba(50, 50, 50, 0.8)),
  to(rgba(80, 80, 80, 0.2)),
  color-stop(.5, #333333)
);

• Mozilla/Firefox: Gunakan sintaks -moz-linear-gradient dengan nilai rgba dalam kedudukan berasaskan peratusan.

background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%,
  rgba(255, 255, 255, 0) 95%
);

• Internet Explorer: Gunakan sintaks hex lanjutan dengan progid :DXImageTransform.Microsoft.gradient: pasangan pertama digit hex (cth., "55") menunjukkan tahap kelegapan.

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF,
  endColorstr=#550000FF
);

/* IE8 and later */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF,
  endColorstr=#550000FF
);

Gabungan ini membolehkan anda mencipta kecerunan dengan variasi warna dan ketelusan, meningkatkan kesan visual unsur web anda.

Atas ialah kandungan terperinci Bolehkah Kecerunan CSS3 Menggabungkan Ketelusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!