在 CSS 中居中背景影象
本教程將演示一些在 CSS 中居中背景影象的方法。
在 CSS 中使用背景屬性使背景影象居中
我們可以使用不同的背景屬性在 CSS 中將背景影象居中。
我們將使用諸如 background-image
、background-repeat
、background-attachment
、background-position
和 background-size
之類的屬性來居中背景影象。我們還可以使用 background
速記屬性來定義這些不同的屬性。
background-image
屬性將使用 url()
函式設定影象。我們使用 background-repeat
屬性來定義影象的重複行為。
background-attachment
屬性定義了背景的固定或滾動行為。我們可以使用 background-position
屬性設定背景的起始位置。
最後,我們可以使用 background-size
屬性設定影象的大小。
例如,選擇 CSS 中的 html
標籤並應用樣式。
首先,使用 background-image
屬性設定背景影象。接下來,將 background-repeat
屬性設定為 no-repeat
。
然後,為 background-attachment
屬性編寫 fixed
選項。之後,將 background-position
屬性應用到 center center
選項並將 background-size
屬性應用到 cover
。
在以下示例中,no-repeat
選項將防止影象重複。當背景影象尺寸較小時,影象將被複製為行和列。
當我們滾動頁面時,背景影象將保持固定,因為我們為 background-attachment
屬性使用了 fixed
選項。background-position
屬性中的選項 center center
將影象水平和垂直放置在中心。
最後,cover
選項將調整影象大小以覆蓋整個 html
容器。因此,我們可以使用 CSS 中的各種背景屬性使背景影象居中。
示例程式碼:
html{
background-image: url("/img/DelftStack/logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
在 CSS 中使用 width
、height
、left
和 top
屬性將背景影象居中
在這個方法中,我們將討論另一種在 CSS 中使用 width
、height
、left
和 top
等屬性居中背景影象的方法。我們可以將高度和寬度設定為 100%
,以便影象佔據 body
標籤的全部高度和寬度。
body
元素是 img
元素的父元素。我們可以使用 top
和 left
屬性來設定背景影象到影象頂部和左側元素的距離。
需要注意的是,這兩個屬性只有在設定了元素的 position
屬性時才會起作用。
例如,選擇 img
標籤並將 width
和 height
屬性設定為 100%
。接下來,將 position
屬性設定為 fixed
。然後,將 left
和 right
屬性設定為 0
。
我們在 left
和 right
屬性中使用 0
值,以在影象的頂部和左側邊緣與相鄰元素不留空間。結果,影象將適合瀏覽器的視口。
通過這種方式,我們可以使用這些不同的屬性來使 CSS 中的背景影象居中。
示例程式碼:
img {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
<div>
<img src="/img/DelftStack/logo.png">
</div>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn