Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kecerunan linear latar belakang dalam css3
Dalam CSS, anda boleh menggunakan atribut "background-image" dan fungsi "linear-gradient()" untuk mencapai kecerunan linear latar belakang elemen Sintaksnya ialah "elemen {background-image:linear -kecerunan(arah kecerunan, warna) 1, warna 2..)”.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara melaksanakan kecerunan linear latar belakang dalam css3
Untuk mencapai kecerunan linear latar belakang elemen dalam css, anda perlu menggunakan imej latar belakang atribut.
Atribut imej latar belakang digunakan untuk menetapkan gaya latar belakang elemen Apabila atribut ini digunakan bersama dengan fungsi kecerunan linear(), latar belakang elemen boleh ditetapkan kepada kecerunan linear. gaya.
Fungsi linear-gradient() digunakan untuk mencipta imej yang mewakili kecerunan linear dua atau lebih warna.
Untuk mencipta kecerunan linear, anda perlu menentukan dua warna Anda juga boleh mencapai kesan kecerunan dalam arah yang berbeza (dinyatakan sebagai sudut Jika arah tidak ditentukan, kecerunan akan dari atas ke bawah). secara lalai.
Contoh adalah seperti berikut:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 300px;
background-image: linear-gradient(red, yellow ,red);
}
</style>
</head>
<body>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk mencapai kecerunan linear latar belakang dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!