Rumah > hujung hadapan web > Tutorial Bootstrap > Bagaimana untuk membuat imej latar belakang bootstrap

Bagaimana untuk membuat imej latar belakang bootstrap

下次还敢
Lepaskan: 2024-04-05 02:12:14
asal
1237 orang telah melayarinya

Terdapat dua cara untuk menetapkan imej latar belakang Bootstrap: gunakan peraturan CSS untuk menambah imej latar belakang: imej latar belakang: url(path/to/image.png); peraturan dalam helaian gaya , termasuk laluan imej latar belakang, saiz dan tetapan ulangan.

Bagaimana untuk membuat imej latar belakang bootstrap

Tetapan imej latar belakang Bootstrap

Dalam Bootstrap, menetapkan imej latar belakang adalah sangat mudah. Dua kaedah diperkenalkan di bawah:

Kaedah 1: Gunakan peraturan CSS

  1. Tambahkan peraturan CSS berikut pada elemen yang anda mahu gunakan imej latar belakang:
<code class="css">background-image: url(path/to/image.png);</code>
Salin selepas log masuk
  1. Ganti path/to/image dengan yang anda mahu gunakan Laluan ke imej.
  2. Anda boleh menetapkan atribut latar belakang lain seperti yang diperlukan, seperti:
<code class="css">background-size: cover;
background-repeat: no-repeat;</code>
Salin selepas log masuk

Kaedah 2: Gunakan kelas utiliti Bootstrap

  1. Tambahkan kelas utiliti berikut pada elemen yang anda mahu gunakan imej latar belakang:
  1. Dalam lembaran gaya , tambahkan peraturan berikut untuk kelas .bg-image:
<code class="html"><div class="bg-image"></div></code>
Salin selepas log masuk

Nota:

  • Laluan ke imej latar belakang boleh menjadi laluan mutlak atau laluan relatif berbanding dengan semasa dokumen HTML.
  • Anda boleh menggunakan pertanyaan media untuk memuatkan imej latar belakang yang berbeza untuk saiz peranti yang berbeza.
  • Anda juga boleh menggunakan atribut kedudukan latar belakang untuk mengawal kedudukan imej latar belakang dalam elemen.

Atas ialah kandungan terperinci Bagaimana untuk membuat imej latar belakang bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan