在 CSS 中居中背景影象

Subodh Poudel 2023年2月20日 2022年4月20日
  1. 在 CSS 中使用背景屬性使背景影象居中
  2. 在 CSS 中使用 widthheightlefttop 屬性將背景影象居中
在 CSS 中居中背景影象

本教程將演示一些在 CSS 中居中背景影象的方法。

在 CSS 中使用背景屬性使背景影象居中

我們可以使用不同的背景屬性在 CSS 中將背景影象居中。

我們將使用諸如 background-imagebackground-repeatbackground-attachmentbackground-positionbackground-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 中使用 widthheightlefttop 屬性將背景影象居中

在這個方法中,我們將討論另一種在 CSS 中使用 widthheightlefttop 等屬性居中背景影象的方法。我們可以將高度和寬度設定為 100%,以便影象佔據 body 標籤的全部高度和寬度。

body 元素是 img 元素的父元素。我們可以使用 topleft 屬性來設定背景影象到影象頂部和左側元素的距離。

需要注意的是,這兩個屬性只有在設定了元素的 position 屬性時才會起作用。

例如,選擇 img 標籤並將 widthheight 屬性設定為 100%。接下來,將 position 屬性設定為 fixed。然後,將 leftright 屬性設定為 0

我們在 leftright 屬性中使用 0 值,以在影象的頂部和左側邊緣與相鄰元素不留空間。結果,影象將適合瀏覽器的視口。

通過這種方式,我們可以使用這些不同的屬性來使 CSS 中的背景影象居中。

示例程式碼:

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
<div>
    <img src="/img/DelftStack/logo.png">
</div>
Subodh Poudel avatar Subodh Poudel avatar

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

相關文章 - CSS Background

相關文章 - CSS Image