Bagaimana untuk meletakkan div berdasarkan imej dalam css

Dalam CSS, anda boleh mengawal kedudukan imej dalam DIV melalui atribut kedudukan latar belakang Langkah-langkah khusus adalah seperti berikut: Kedudukan mendatar: Nilai pertama kedudukan latar belakang ialah lebar imej. Kedudukan menegak: Nilai kedua kedudukan latar belakang ialah ketinggian imej. Kedudukan serentak: kedudukan latar belakang menetapkan nilai lebar dan ketinggian pada masa yang sama.

Menggunakan CSS untuk meletakkan DIV agar sepadan dengan kedudukan imej

Dalam CSS, anda boleh menggunakan atribut background-position untuk mengawal kedudukan imej dalam elemen div . Sifat ini menerima dua nilai: yang pertama mengawal kedudukan mendatar imej, dan yang kedua mengawal kedudukan menegaknya. Unit boleh menjadi piksel (px), peratusan (%) atau kata kunci (kiri, center, right, atas, bawah). background-position 属性来控制图像在 div 元素内的位置。该属性接受两个值：第一个值控制图像的水平位置，第二个值控制其垂直位置。单位可以是像素 (px)、百分比 (%) 或关键字 (left、center、right、top、bottom）。

水平定位

要根据图像水平定位 div，可以将 background-position 的第一个值设置为图像的宽度。例如，如果图像宽度为 200px，则 CSS 代码为：

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 0;
}</code>

垂直定位

要根据图像垂直定位 div，可以将 background-position

Kedudukan Mendatar

Untuk meletakkan div secara mendatar berdasarkan imej, tetapkan nilai pertama kedudukan latar belakang kepada lebar imej. Sebagai contoh, jika lebar imej ialah 200px, kod CSS ialah:

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 0 100px;
}</code>

🎜Kedudukan menegak🎜🎜🎜Untuk meletakkan div secara menegak berdasarkan imej, anda boleh menetapkan nilai kedua kedudukan latar belakang kod> kepada imej tinggi. Contohnya, jika ketinggian imej ialah 100px, kod CSS ialah: 🎜

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 100px;
}</code>

🎜🎜Kedudukan serentak🎜🎜🎜Untuk meletakkan div berdasarkan kedua-dua kedudukan mendatar dan menegak imej, anda boleh menetapkan kedua-dua nilai ke dimensi imej yang sepadan. Contohnya: 🎜rrreee

Atas ialah kandungan terperinci Bagaimana untuk meletakkan div berdasarkan imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!