Rumah >hujung hadapan web >html tutorial >Bagaimana untuk menetapkan sifat latar belakang yang berbeza dalam satu kenyataan?
Bagaimana untuk menetapkan sifat latar belakang yang berbeza dalam satu kenyataan?
- WBOYke hadapan
- 2023-09-15 09:45:021349semak imbas
CSS (Cascading Style Sheets) ialah alat yang berkuasa untuk mereka bentuk penampilan visual tapak web anda, termasuk sifat latar belakang. Menggunakan CSS, anda boleh menyesuaikan sifat latar belakang halaman web dengan mudah, mencipta reka bentuk unik dan meningkatkan pengalaman pengguna. Menggunakan pengisytiharan ialah cara yang cekap untuk menetapkan pelbagai sifat latar belakang, yang bagi pembangun web membantu menjimatkan masa dan memastikan kod bersih.
Memahami sifat latar belakang
Sebelum menetapkan berbilang sifat latar belakang dalam satu pengisytiharan, kita perlu memahami sifat latar belakang berbeza yang tersedia dalam CSS dan memahami cara setiap sifat berfungsi. Di bawah ialah gambaran ringkas setiap hartanah.
BackgroundColor − Atribut ini membenarkan menetapkan warna latar belakang elemen.
Background-image - Atribut ini membenarkan menetapkan imej latar belakang elemen. Tetapkan imej latar belakang menggunakan URL imej, kecerunan linear atau kecerunan jejarian.
Background-repeat − Atribut ini membenarkan menetapkan cara imej latar belakang berulang. Boleh dikawal menggunakan nilai seperti repeat, repeat-x, repeat-y dan no-repeat.
Kedudukan latar belakang − Sifat ini membenarkan menetapkan kedudukan imej latar belakang. Imej latar belakang boleh diletakkan menggunakan nilai seperti atas, bawah, kiri, kanan dan tengah.
Saiz latar belakang − Atribut ini membenarkan menetapkan saiz imej latar belakang. Saiz imej latar belakang boleh ditetapkan menggunakan automatik, tindanan, kemasukan atau nilai saiz tertentu dalam piksel, ems atau peratusan.
Lampiran-Latar Belakang - Atribut ini membenarkan tetapan sama ada imej latar belakang perlu menatal dengan halaman atau kekal tetap.
Tetapkan sifat latar belakang yang berbeza dalam satu pernyataan
'latar belakang' sifat yang disingkatkan digunakan untuk menetapkan berbilang sifat latar belakang, yang membolehkan menetapkan warna latar belakang, imej, ulangan, kedudukan dan lampiran dalam satu perisytiharan.
tatabahasa
selector {
background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment];
}
Susunan atribut di sini tidak penting, setiap atribut dipisahkan oleh ruang. Bergantung pada keperluan reka bentuk, harta lain boleh disertakan dalam sifat trengkas "latar belakang".
Contoh cara menetapkan berbilang sifat latar belakang dalam satu perisytiharan.
Sekarang, kita akan melihat beberapa contoh menetapkan berbilang sifat latar belakang dalam satu perisytiharan.
Contoh 1: Tetapkan imej latar belakang
Di sini kita akan menetapkan imej latar belakang dalam elemen badan menggunakan atribut trengkas "latar belakang".
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") no-repeat center center fixed;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Setting a background image in the body element</h3>
</body>
</html>
Dalam contoh di atas, kami menetapkan imej latar belakang dan warna latar belakang elemen badan. Kami juga menetapkan kedudukan latar belakang ke tengah dan membetulkan imej latar belakang supaya ia tidak bergerak semasa menatal. Atribut "no-repeat" memastikan bahawa imej latar belakang tidak berulang.
Contoh 2: Tetapkan latar belakang kecerunan
Di sini, kami akan menggunakan atribut trengkas latar belakang untuk menetapkan latar belakang kecerunan dalam elemen badan.
<!DOCTYPE html>
<html>
<head>
<title>Setting the Gradient Background</title>
<style>
body {
background: linear-gradient(to top, #00cfff, #1e40ff);
}
h1,h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Setting the Gradient Background in the body element</h3>
</body>
</html>
Dalam contoh di atas, kami menggunakan fungsi "linear-gradient" untuk menetapkan latar belakang kecerunan. Parameter "ke atas" menentukan bahawa kecerunan harus pergi dari bawah ke atas.
Contoh 3 - Menetapkan imej latar belakang dalam elemen div
Di sini, kami akan menetapkan imej latar belakang dalam elemen div menggunakan atribut trengkas "latar belakang".
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
div {
background: lightblue url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat center fixed;
height:300px;
width:250px;
margin:auto;
}
</style>
</head>
<body>
<h2>Setting the Background image for the div element</h2>
<div></div>
</body>
</html>
Dalam contoh di atas, kami menetapkan imej latar belakang dan warna latar belakang elemen badan. Kami juga menetapkan kedudukan latar belakang ke tengah dan membetulkan imej latar belakang supaya ia tidak bergerak semasa menatal.
KESIMPULAN
Dalam artikel di atas, kami membincangkan menetapkan sifat latar belakang dalam satu pengisytiharan. Atribut latar belakang adalah bahagian penting dalam gaya halaman web. Kami menggunakan sifat trengkas untuk menetapkan berbilang sifat latar belakang dalam satu pengisytiharan. Atribut trengkas latar belakang sangat berguna untuk menjimatkan masa dan meningkatkan kebolehbacaan kod.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan sifat latar belakang yang berbeza dalam satu kenyataan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!