Rumah >hujung hadapan web >tutorial css >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<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
<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!