在 CSS 中居中背景影象

1. 在 CSS 中使用背景屬性使背景影象居中
2. 在 CSS 中使用 width、height、left 和 top 屬性將背景影象居中

本教程將演示一些在 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>