Bagaimana untuk menetapkan sifat latar belakang yang berbeza dalam satu kenyataan?-html tutorial-php.cn

Bagaimana untuk menetapkan sifat latar belakang yang berbeza dalam satu kenyataan?

WBOY

Lepaskan： 2023-09-15 09:45:02

ke hadapan

1355 orang telah melayarinya

Bagaimana untuk menetapkan sifat latar belakang yang berbeza dalam satu kenyataan?

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];
}

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!