Bagaimana untuk menetapkan imej latar belakang untuk dipusatkan dalam css

下次还敢
Lepaskan: 2024-04-25 14:33:13
asal
876 orang telah melayarinya

Dalam CSS, anda boleh menetapkan tengah imej latar belakang melalui atribut kedudukan latar belakang: Nilai mendatar: tengah (tengah), kiri (jajaran kiri), kanan (jajaran kanan) Nilai menegak: tengah (tengah), atas ( penjajaran atas), bawah (penjajaran bawah) sintaks: kedudukan latar belakang: nilai menegak nilai mendatar;

Bagaimana untuk menetapkan imej latar belakang untuk dipusatkan dalam css

Cara menggunakan CSS untuk menetapkan imej latar belakang untuk dipusatkan

Jawapan terus ke titik :

Dalam CSS, gunakan atribut Background-position boleh menetapkan kedudukan tengah imej latar belakang. background-position 属性可以设置背景图片的居中位置。

详细展开:

background-position 属性接受两个值,分别指定水平和垂直位置:

  • 水平值:

    • center:水平居中
    • left:左对齐
    • right:右对齐
  • 垂直值:

    • center:垂直居中
    • top:上对齐
    • bottom:下对齐

语法:

<code class="css">background-position: horizontal-value vertical-value;</code>
Salin selepas log masuk

示例:

<code class="css">body {
  background-image: url("background.jpg");
  background-position: center center;
}</code>
Salin selepas log masuk

其他注意事项:

  • 如果指定了单个值,则它会同时应用于水平和垂直位置。
  • 可以使用百分比值(相对于背景图片的尺寸)或长度值(单位为像素或 em)。
  • 还可以使用关键字 initialinherit,分别将值重置为初始值或继承父元素的值。

提示:

  • 在使用百分比值时,请确保值不会导致背景图片超出容器的边界。
  • 如果背景图片的宽高比与容器的宽高比不同,则使用 background-size
Peluasan terperinci: 🎜🎜🎜kedudukan latar belakang Atribut menerima dua nilai, masing-masing menyatakan kedudukan mendatar dan menegak: 🎜
  • 🎜🎜Nilai mendatar: 🎜🎜
      tengah: mendatar tengah🎜
    • kiri: kiri dijajar🎜
    • kanan: kanan dijajar🎜🎜🎜
    • 🎜 🎜Nilai menegak: 🎜🎜
      • tengah: Berpusat menegak 🎜
      • atas: Penjajaran atas🎜
      • bawah : sejajarkan bahagian bawah 🎜🎜🎜🎜🎜🎜 Sintaks: 🎜🎜rrreee🎜🎜 Contoh: 🎜🎜rrreee🎜🎜Nota lain: 🎜🎜
        • Jika nilai mendatar dan menegak ditetapkan untuk kedua-duanya . 🎜
        • Anda boleh menggunakan nilai peratusan (berbanding dengan saiz imej latar belakang) atau nilai panjang (dalam piksel atau em). 🎜
        • Anda juga boleh menggunakan kata kunci initial dan inherit untuk menetapkan semula nilai kepada nilai awal atau mewarisi nilai elemen induk masing-masing. 🎜🎜🎜🎜Petua: 🎜🎜
          • Apabila menggunakan nilai peratusan, pastikan nilai tersebut tidak menyebabkan imej latar belakang melebihi had bekas. 🎜
          • Jika imej latar belakang mempunyai nisbah bidang yang berbeza daripada bekas, gunakan atribut saiz latar belakang untuk mengubah saiz imej untuk mengelakkan herotan. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk menetapkan imej latar belakang untuk dipusatkan dalam css. 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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!