在CSS中,可透過background-position屬性控制圖片在DIV中的位置,具體步驟如下:水平定位:background-position的第一個值為圖片寬度。垂直定位:background-position的第二個值為圖片高度。同時定位:background-position同時設定寬度和高度值。
利用CSS 定位DIV 以符合圖片位置
在CSS 中,可以使用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
的第二個值設定為影像的高度。例如,如果影像高度為100px,則CSS 程式碼為:
<code class="css">div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 0 100px; }</code>
#同時定位
要同時根據影像的水平和垂直位置定位div,可以將兩個值都設定為對應的圖像尺寸。例如:
<code class="css">div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 200px 100px; }</code>
以上是css中div如何根據圖片定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!