Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat latar belakang kecerunan linear menggunakan CSS?
Bagaimana untuk membuat latar belakang kecerunan linear menggunakan CSS?
- WBOYke hadapan
- 2023-08-28 23:57:021499semak imbas
Dalam CSS, latar belakang kecerunan linear ialah teknik reka bentuk yang digunakan untuk mencipta peralihan yang lancar antara dua atau lebih warna dalam satu elemen. Ia ditakrifkan menggunakan sifat imej latar belakang CSS dan fungsi lineargradient().
Harta Kecerunan Linear dalam CSS
ke - Ia menentukan arah kecerunan
color-stop − Ia menyatakan warna yang digunakan dalam kecerunan dan kedudukannya.
reating-linear-gradient - Buat kecerunan berulang di mana corak kecerunan berulang secara mendatar atau menegak.
saiz latar belakang − Ia menentukan saiz latar belakang kecerunan.
klip latar belakang − Ia menentukan kawasan elemen yang harus diliputi oleh latar belakang kecerunan.
latar belakang-asal - Ia menyatakan asal latar belakang kecerunan.
lampiran-latar belakang - Ia menentukan sama ada latar belakang kecerunan harus dibetulkan atau tatal dengan seluruh halaman.
kedudukan latar belakang - Ia menentukan kedudukan latar belakang kecerunan dalam elemen.
Buat latar belakang kecerunan linear menggunakan CSS
Kecerunan linear ialah kesan latar belakang yang popular dalam reka bentuk web kerana ia boleh menambah kedalaman dan tekstur pada sebarang elemen. Ia mudah dilakukan menggunakan CSS, tiada grafik atau perisian reka bentuk yang kompleks diperlukan. Dalam artikel ini, kami akan meneroka cara mencipta latar belakang kecerunan linear menggunakan CSS.
Langkah
Dengan langkah berikut, kami boleh mencipta latar belakang kecerunan linear dalam HTML dan CSS dengan mudah.
Langkah 1: Tentukan kecerunan
Dalam langkah ini kami mentakrifkan kecerunan. Untuk mencipta kecerunan linear, kami menggunakan sifat CSS latar belakang dan fungsi linear-gradient().
Langkah 2: Gunakan kecerunan pada elemen
Selepas menentukan kecerunan, kami menerapkannya pada elemen HTML.
Langkah 3: Sesuaikan kecerunan
Kecerunan boleh disesuaikan dengan mudah mengikut keperluan reka bentuk. Kita boleh menukar arah kecerunan dengan menukar nilai kepada kata kunci.
Terjemahan bahasa Cina bagiContoh 1
ialah:Contoh 1
Dalam contoh ini, kesan kecerunan digunakan pada elemen body dalam blok gaya CSS di kepala dokumen HTML.
<html>
<head>
<title>Example to create linear gradient background using CSS</title>
<style>
body {
background: linear-gradient(to right, #ff0000, #ffff00);
}
</style>
</head>
<body>
<h2>Creating linear gradient background using CSS </h2>
<p>This is a sample HTML document with a linear gradient background.</p>
</body>
</html>
Dalam contoh di atas, kecerunan daripada merah (#ff0000) kepada kuning (#ffff00) dibuat menggunakan fungsi linear-gradient CSS, dari kiri ke kanan. Kecerunan digunakan pada elemen badan dalam blok gaya CSS di bahagian kepala dokumen HTML.
Contoh 2
Dalam contoh ini, kesan kecerunan akan digunakan pada elemen .container dan akan bertindak sebagai bekas untuk kandungan teks.
<html>
<head>
<title>Example to create linear gradient background using CSS</title>
<style>
body{
text-align:center;
}
.container {
height: 200px;
background: linear-gradient(to bottom, #ff0000, #ffff00);
}
</style>
</head>
<body>
<div class="container">
<h2>Creating linear gradient background using CSS </h2>
<p>This is a sample HTML document with a linear gradient background.</p>
</div>
</body>
</html>
Dalam contoh di atas, kelas CSS yang dipanggil .container dicipta dan digunakan pada elemen div dalam badan HTML. Fungsi CSS Linear Gradient digunakan untuk mencipta kecerunan bermula daripada merah (#ff0000) kepada kuning (#ffff00) dari atas ke bawah (ke bawah).
Terjemahan bahasa Cina bagiContoh 3
ialah:Contoh 3
Dalam contoh ini, kesan kecerunan akan digunakan pada elemen .header
<html>
<head>
<title>Example to create linear gradient background using CSS</title>
<style>
.header {
height: 50px;
background: linear-gradient(45deg, #ff0000, #ffff00);
}
</style>
</head>
<body>
<div class="header"></div>
<h2>Creating linear gradient background using CSS </h2>
<p>This is a sample HTML document with a linear gradient background.</p>
</body>
</html>
Dalam contoh di atas, kelas CSS yang dipanggil .header dicipta dan digunakan pada elemen div dalam badan HTML. Gunakan fungsi linear-gradient CSS untuk mencipta kecerunan daripada merah (#ff0000) kepada kuning (#ffff00), bermula pada sudut 45 darjah . Kecerunan ini digunakan pada elemen .header dengan ketinggian 100 piksel, berfungsi sebagai bahagian pengepala halaman.
Kesimpulan
Mencipta latar belakang kecerunan linear menggunakan CSS ialah cara yang mudah dan berkesan untuk menambah kedalaman dan tekstur pada reka bentuk web anda. Hanya beberapa baris kod.
Atas ialah kandungan terperinci Bagaimana untuk membuat latar belakang kecerunan linear menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!