Betulkan perbezaan warna kecerunan latar belakang antara penyemak imbas

Panduan Pembaikan Warna Latar Belakang Latar Belakang Lataring

Semasa pembangunan, saya melihat perbezaan warna yang ketara antara Firefox 12 dan Chrome Canary 21. Ini jelas berkaitan dengan cara penyemak imbas yang berbeza menyebabkan CSS3.

kod CSS sebelumnya

background-image: -moz-linear-gradient(top, #5CB6F2, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0ae), to(#fff));
background-image: -webkit-linear-gradient(top, #0ea, white);

kod CSS tetap

background: #FFFFFF; /* 用于不支持CSS3的浏览器 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CB6F2', endColorstr='#FFFFFF'); /* 用于IE浏览器 */
background: -webkit-gradient(linear, left top, left bottom, from(#5CB6F2), to(#FFF)); /* 用于webkit浏览器 */
background: -moz-linear-gradient(top,  #5CB6F2,  #FFF); /* 用于Firefox 3.6+ */

Lakukan! :)

dari rasa ingin tahu, inilah cara memaparkan di Internet Explorer 9:

Soalan Lazim mengenai Soalan Lazim mengenai Perbezaan Warna Kecerunan Latar Belakang Latar Belakang Pembaikan

Mengapa penyemak imbas yang berbeza memaparkan warna kecerunan secara berbeza?

Sebab utama mengapa pelbagai pelayar memaparkan warna kecerunan adalah bahawa pelayar ini menafsirkan dan membuat CSS dengan cara yang berbeza. Setiap penyemak imbas mempunyai enjin rendering sendiri, yang bertanggungjawab untuk memaparkan kandungan laman web. Enjin ini menafsirkan kod CSS dengan cara yang berbeza, menghasilkan paparan warna kecerunan yang sedikit berbeza. Sebagai contoh, penyemak imbas WebKit seperti Safari dan Chrome boleh menjadikan warna yang sedikit berbeza daripada pelayar Gecko seperti Firefox.

Bagaimana untuk memastikan paparan warna kecerunan yang konsisten dalam semua pelayar?

Untuk memastikan paparan warna kecerunan yang konsisten dalam semua pelayar, anda boleh menggunakan awalan vendor. Ini adalah kod unik khusus untuk setiap penyemak imbas. Sebagai contoh, untuk Firefox anda akan menggunakan

, untuk Chrome dan Safari anda akan menggunakan

, dan untuk opera anda akan menggunakan

. Dengan menentukan awalan ini dalam CSS, anda dapat memastikan bahawa setiap penyemak imbas dapat menafsirkan kecerunan seperti yang diharapkan.

-moz-linear-gradient Apakah awalan vendor dalam CSS? -webkit-linear-gradient -o-linear-gradient awalan vendor adalah cara untuk pelayar untuk melaksanakan dan mencuba sebelum ciri CSS baru menjadi standard. Mereka khusus untuk setiap penyemak imbas, yang membolehkan pemaju menargetkan penyemak imbas tertentu dengan gaya atau ciri yang berbeza. Sebagai contoh,

digunakan untuk krom dan safari,

digunakan untuk Firefox,

digunakan untuk Internet Explorer,

digunakan untuk opera. -webkit- -moz- Bagaimana menggunakan kecerunan linear CSS? -ms- -o- kecerunan linear CSS boleh digunakan untuk membuat peralihan lancar antara dua atau lebih warna yang ditentukan. Untuk membuat kecerunan linear, anda boleh menggunakan fungsi

. Dalam fungsi ini, anda boleh menentukan arah kecerunan dan warna untuk digunakan. Sebagai contoh,

mencipta kecerunan dari kiri ke kanan dari merah ke oren.

Kenapa kecerunan CSS saya tidak berfungsi di Internet Explorer?

Internet Explorer tidak menyokong sintaks kecerunan CSS standard. Sebaliknya, ia menggunakan atribut filter untuk membuat kecerunan. Sebagai contoh, untuk membuat kecerunan dari putih ke hitam, anda boleh menggunakan filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');. Walau bagaimanapun, ini tidak disyorkan kerana ia bukan CSS standard dan mungkin tidak berfungsi dalam semua versi IE.

Bagaimana untuk membuat kecerunan radial dalam CSS?

Untuk membuat kecerunan radial dalam CSS, anda boleh menggunakan fungsi radial-gradient(). Dalam fungsi ini, anda boleh menentukan bentuk dan saiz kecerunan, serta warna yang digunakan. Sebagai contoh, background: radial-gradient(circle, red, yellow, green); mencipta kecerunan bulat dari merah ke kuning ke hijau.

Bolehkah saya menggunakan ketelusan dalam kecerunan CSS?

Ya, anda boleh menggunakan ketelusan dalam kecerunan CSS. Untuk melakukan ini, anda boleh menggunakan fungsi rgba() untuk menentukan warna. Sebagai contoh, background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,255,0,0.5)); mencipta kecerunan dari merah lut ke hijau lut.

Bagaimana untuk membuat kecerunan pepenjuru di CSS?

Untuk membuat kecerunan pepenjuru di CSS, anda boleh menentukan arah dalam fungsi linear-gradient(). Sebagai contoh, background: linear-gradient(to bottom right, red, blue); mencipta kecerunan dari pepenjuru merah ke biru dari sudut kiri atas ke sudut kanan bawah.

Bolehkah saya menggunakan pelbagai kecerunan dalam satu elemen?

Ya, anda boleh menggunakan pelbagai kecerunan dalam satu elemen. Untuk melakukan ini, anda hanya perlu memisahkan setiap kecerunan dengan koma. Sebagai contoh, background: linear-gradient(red, blue), linear-gradient(yellow, green); mencipta dua kecerunan, satu dari merah ke biru dan satu dari kuning ke hijau.

Bagaimana untuk membuat kecerunan berulang dalam CSS?

Untuk membuat kecerunan berulang dalam CSS, anda boleh menggunakan fungsi repeating-linear-gradient() atau repeating-radial-gradient(). Fungsi-fungsi ini berfungsi dengan cara yang sama seperti fungsi yang tidak sepadan dengan mereka, tetapi mereka mengulangi kecerunan yang ditentukan. Sebagai contoh, background: repeating-linear-gradient(red, yellow 10%, green 20%); mencipta kecerunan dari merah ke kuning ke hijau dan kemudian diulang.

Atas ialah kandungan terperinci Betulkan perbezaan warna kecerunan latar belakang antara penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!