Rumah >hujung hadapan web >tutorial css >Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci)
Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci)
- 奋力向前asal
- 2021-08-03 17:43:5315030semak imbas
Dalam artikel sebelumnya "Cara menggunakan html untuk membuat borang penyerahan ringkas (penjelasan kod terperinci) ", saya memperkenalkan cara menggunakan html untuk membuat borang. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css untuk menetapkan kecerunan warna latar belakang Mari kita lihat cara melakukannya bersama-sama.
Mereka semua boleh mewakili mana-mana warna dengan cara mereka sendiri, hanya dari sudut yang berbeza.
Dalam mod RGB, semua warna boleh diperoleh dengan menggabungkan nisbah tenaga berbeza merah, hijau dan biru.
Contohnya:
rgb (100%, 0%, 0%) adalah merah; ;
rgb (80%, 0%, 100%) berwarna ungu.
Anda boleh menguji nilai ini secara berasingan dalam penyemak imbas
root { background rgb(100% 0% 0%); }- rgb (100%, 0%, 0%) juga boleh ditulis sebagai rgb ( 255, 0, 0), setiap warna primer dibahagikan kepada 255 bahagian yang sama.
- 0 bermaksud tiada intensiti langsung, 255 bermaksud intensiti tertinggi. Walaupun rgb(255,0,0) dan rgb(100,0,0) kedua-duanya berwarna merah, yang pertama kelihatan lebih terang daripada yang kedua kerana keamatan cahaya yang tinggi.
- Ini juga terbukti dengan baik dalam warna hitam dan putih. Hitam dalam mod RGB ialah rgb (0, 0, 0) (ketiga-tiganya tidak mengeluarkan cahaya), manakala putih ialah rgb (255, 255, 255) (ketiga-tiganya memancarkan cahaya terkuat).
- Cara untuk menetapkan latar belakang kecerunan div dengan CSS
1. Gunakan teg
.div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css颜色渐变</title> </head> <body> <div> </div> </body> </html>di dalam teg
. header<div>3. Untuk kecerunan warna, anda perlu menetapkan <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html></pre> dan <p>, lebar dan tinggi untuk <code>div. widthheight
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> atribut latar belakang dan gunakan div untuk kecerunan warna latar belakang. background-webkit-linear-gradient
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient();
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> di dalam dan tetapkan kecerunan untuk bermula dari atas dan berakhir di bawah. Jika anda menulis -webkit-linear-gradient, jangan tulis top. topbottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient(top);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>Rendering adalah seperti berikut: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient(top,white,lightblue,skyblue);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Pembelajaran yang disyorkan:
Atas ialah kandungan terperinci Artikel CSS: Cara menetapkan kesan kecerunan pada latar belakang halaman (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!