在 css 中,可通過 background-position 屬性設置背景圖片居中:水平值:center(居中)、left(左對齊)、right(右對齊)垂直值:center(居中)、top(上對齊)、bottom(下對齊)語法:background-position: horizontal-value vertical-value;
如何使用 CSS 設置背景圖片居中
開門見山解答:
在 CSS 中,使用 background-position
屬性可以設置背景圖片的居中位置。
詳細展開:
background-position
屬性接受兩個值,分別指定水平和垂直位置:
水平值:
center
:水平居中
left
:左對齊
right
:右對齊
垂直值:
center
:垂直居中
top
:上對齊
bottom
:下對齊
語法:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">background-position: horizontal-value vertical-value;</code>
登錄后復制
示例:
<code class="css">body { background-image: url("background.jpg"); background-position: center center; }</code>
登錄后復制
其他注意事項:
如果指定了單個值,則它會同時應用于水平和垂直位置。
可以使用百分比值(相對于背景圖片的尺寸)或長度值(單位為像素或 em)。
還可以使用關鍵字 initial
和 inherit
,分別將值重置為初始值或繼承父元素的值。
提示:
在使用百分比值時,請確保值不會導致背景圖片超出容器的邊界。
如果背景圖片的寬高比與容器的寬高比不同,則使用 background-size
屬性調整圖片的大小,以防止失真。