Penjelasan terperinci tentang pengaturan atribut latar belakang-gambar di HTML

Properti latar belakang-gambar memungkinkan Anda untuk menentukan gambar yang ditampilkan di latar belakang. Ini dapat digunakan bersama dengan warna latar belakang, jadi jika gambar tidak diulang, warna latar belakang akan diisi dengan warna latar belakang jika gambar tidak dapat ditutupi. Kode sederhana, ingatlah bahwa jalurnya relatif terhadap stylesheet, jadi dalam kode berikut, gambar dan stylesheet berada di direktori yang sama

Untuk gambar, pertama -tama kita memikirkan gambar latar belakang. Karena banyak dekorasi kami dicapai dengan gambar latar belakang. Karena itu masalahnya, mari kita mulai dengan gambar latar belakang kontrol CSS.

Properti latar belakang-gambar menetapkan gambar latar belakang untuk elemen.

Latar belakang suatu elemen mengambil semua dimensi elemen, termasuk margin dan perbatasan bagian dalam, tetapi bukan margin luar.

Secara default, gambar latar belakang terletak di sudut kiri atas elemen dan diulang secara horizontal dan vertikal.

Untuk halaman web, ketika kami mulai mendesain, kami mungkin tidak terlalu memikirkan apa gambar latar belakangnya, karena kebanyakan dari mereka hanya perlu merancang warna latar belakang. Saya pikir ini sangat sederhana, karena itu sama dengan musik latar depan, dan kecepatan pembukaan halaman web akan berdampak tertentu. Namun, untuk situs web pribadi atau blog pribadi, tentu saja sangat diperlukan untuk menunjukkan kepribadian mereka sendiri. Tentu saja, tidak ada yang tidak terlalu sempurna. Ada hal -hal baik dan hal -hal buruk. Artinya, ketika gambar tidak tersedia tetapi CSS tersedia, konten penggantian tidak akan ditampilkan. Oleh karena itu, tidak disarankan untuk menggunakan gambar latar belakang CSS dalam teks tombol navigasi atau situasi serupa.

Ada banyak atribut CSS yang mengontrol gambar latar belakang, dan kebanyakan dari mereka akan digunakan selama mereka terkait dengan gambar.

Tentu saja, yang paling dikenal semua orang adalah latar belakang dan latar belakang-gambar.

Kode untuk merancang gambar latar belakang untuk halaman web adalah:

body {latar belakang: url (d: /images/04.jpg)}

atau

body {latar belakang: url (d: /images/04.jpg)}

Dengan cara ini, kami dapat mengimpor gambar yang ingin kami gunakan sebagai latar belakang ke halaman web.

Tentu saja, menggunakan kode di atas saja tidak akan dapat mengungkapkan efek yang Anda inginkan. Karena jika gambarnya kecil, itu akan menjadi ubin dengan cara yang datar. Jika besar, untuk menampilkannya, bilah gulir akan muncul, yang tidak bagus. Oleh karena itu, kita harus menggunakan latar belakang-repeat untuk kontrol tampilan.

Itu nilainya:

Ulangi: Nilai default. Latar belakang gambar ubin dalam potret dan arah horizontal

No-Repeat: Gambar latar tidak ubin

Repeat-X: Gambar latar belakang hanya ubin secara horizontal

Ulangi-y: Gambar latar belakang hanya ubin dalam arah vertikal

Adapun kode, saya pikir siapa pun yang tahu sedikit CSS mengetahuinya, sebagai berikut

:

body {latar belakang: url (d: /images/04.jpg); latar belakang-rePeat: no-rePeat}

Dengan cara ini, ini ditampilkan pada ukuran gambar asli.

Tapi pertanyaannya adalah, bagaimana jika gambarnya terlalu besar? Untuk halaman web yang bagus, sebaiknya tidak menggunakan gambar yang terlalu besar. Alasannya juga telah disebutkan di atas, yang mempengaruhi kecepatan membuka halaman web. Kami lebih baik menggunakan PS atau kembang api untuk menanganinya. Tetapi karena saya menyebutkannya, kami tidak takut menggunakan CSS untuk mengontrol ukuran gambar.

Saya pikir banyak orang akan secara alami menggunakan kode berikut: