如何用CSS添加背景圖片 – 教程

一、如何在css裡面添加背景圖片

在CSS中添加背景圖片有兩種方式，一是通過CSS樣式表，二是通過內聯樣式。下面分別介紹這兩種方式：

1.1 通過CSS樣式表添加背景圖片

在CSS樣式表中，我們可以使用background-image屬性來指定一個背景圖片，這個屬性可以包含一個圖片的URL地址，以及其他的一些背景屬性。下面是一個例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

這裡我們指定了background-image為background.jpg，background-repeat為no-repeat，表示背景圖片不重複，background-position為center top，表示背景圖片在容器中垂直居中且水平居中。

1.2 通過內聯樣式添加背景圖片

除了可以在CSS樣式表中添加背景圖片外，我們也可以在HTML標籤中添加內聯樣式來設置背景圖片。通過在標籤上使用style屬性，來指定相應的背景屬性，例如：

<div style="background-image:url('background.jpg'); width: 500px; height: 300px;">
  <p>這是一個背景圖片</p>
</div>

這裡我們在<div>標籤上增加了style屬性，並且指定background-image為background.jpg，表示該<div>標籤的背景使用background.jpg圖片。同時我們也指定了該標籤的寬度和高度分別為500px和300px。

二、CSS偽元素添加背景圖片

偽元素（pseudo-element）是CSS中的一種虛擬元素，在標記文檔中並不存在，但可以通過CSS來為其添加樣式。偽元素允許我們將CSS內容添加到DOM樹中尚未生成的元素中。

2.1 偽元素添加單張背景圖片

偽元素也可以用來添加背景圖片，只需在偽元素上添加 background-image 屬性，例如：

.btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("icon.png");
}

上述代碼在class為.btn的元素之前添加一個偽元素，並設置該偽元素的background-image屬性為icon.png。這裡，我們通過設置內容為空、寬度和高度為16px、display:inline-block來顯示一個小圖標。

2.2 偽元素添加多張背景圖片

多張背景圖片的添加同樣適用於偽元素，只需在background-image中添加多個URL地址，以逗號分隔即可。例如：

.box:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 40px;
  margin-right: 10px;
  background-image:
    url("icon1.png"),
    url("icon2.png");
  background-size:
    10px 10px,
    20px 20px;
  background-repeat: no-repeat, repeat-x;
}

上述代碼為class為.box的元素添加一個偽元素，並設置該偽元素的background-image屬性為icon1.png和icon2.png，在background-size屬性中為每張圖片設置不同的尺寸，background-repeat屬性中分別為每張圖片設置不同的重複樣式。

三、html添加背景圖片css

3.1 HTML標籤直接添加背景圖片

除了可以在CSS樣式表中添加背景圖片，我們也可以在HTML標籤上添加樣式屬性來直接設置背景圖片。例如：

<div style="background-image: url('background.jpg');">
  <p>這是一個背景圖片</p>
</div>

這裡我們在<div>標籤上增加了style屬性，並且指定background-image為background.jpg，表示該<div>標籤的背景使用background.jpg圖片。

3.2 CSS引入HTML圖片作為背景

我們也可以將HTML中的image元素引入CSS樣式表中，作為元素的背景圖片。例如：

<img src="background.jpg" class="bg-img">

.bg-img {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.5;
}

這裡我們先在HTML中引入一個<img>標籤，並設置其src為background.jpg。接著在CSS中，我們為該圖片元素添加樣式，並將其設置為元素的背景。在CSS樣式中我們還可以設置圖片元素的寬度、高度、位置、層級、透明度等屬性。

四、CSS里怎麼添加背景圖片

CSS里添加背景圖片並不難，只需要使用background-image屬性即可。下面是一個簡單的例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

這樣我們就將背景圖片添加到了頁面的body元素上。

五、css添加背景圖片顯示不出來

如果在CSS中添加了背景圖片，但是在瀏覽器中卻沒有顯示出來，可能有以下幾個原因：

5.1 圖片路徑錯誤

首先需要檢查圖片路徑是否正確。如果路徑不正確，瀏覽器就會在伺服器上找不到這個圖片，導致無法顯示。所以，需要檢查圖片路徑是否正確，包括路徑的大小寫是否正確。

5.2 圖片文件已被移動或刪除

如果圖片文件已被移動或刪除，瀏覽器就找不到這個圖片文件，導致無法顯示。所以，也需要檢查圖片文件是否存在。

5.3 圖片格式不受支持

如果瀏覽器不支持圖片格式，那麼就無法將圖片顯示在頁面上。在這種情況下，需要將圖片轉換成支持的格式，例如將BMP格式轉換成PNG格式。

六、CSS添加背景圖片代碼

CSS添加背景圖片的代碼非常簡單，主要使用background-image屬性來指定背景圖片的路徑。下面是一個簡單的例子：

div {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

這裡我們將背景圖片添加到了<div>標籤上，並設置background-repeat為no-repeat，表示背景圖片不重複，background-position為center top，表示背景圖片在容器中垂直居中且水平居中。

七、CSS在背景圖片中添加文字

CSS在背景圖片中添加文字可以通過使用CSS的文字屬性來實現。可以使用 text-align 和 vertical-align 屬性來設置文本的位置，例如：

.div {
  background-image: url("background.jpg");
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  font-weight: bold;
}

上面的代碼為標籤<div>添加了背景圖片，並在背景圖片中疊加了文本。text-align: center 和 vertical-align: middle屬性分別用來讓文本水平和垂直居中顯示。color屬性用於設置文本顏色，font-size屬性用於設置字體大小，font-weight屬性用於設置文本的粗細。

八、CSS添加背景圖片使之平鋪

如果想要讓背景圖片鋪滿整個容器，可以使用 background-size 屬性來實現。background-size 屬性用來控制背景圖片的尺寸和縮放方式。常用的值有 cover、contain 和 auto。下面是一個例子：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

在上述代碼中，我們使用了 background-size: cover 值，將背景圖片放大或縮小，以適應容器，並截掉多餘的部分。如果想讓圖片全部顯示，則可以使用 background-size: contain 值，這個值會縮小圖片，使之全部顯示在容器中。

九、CSS背景圖片怎麼添加

CSS添加背景圖片很容易，只需要將圖片文件的路徑添加到 background-image 屬性中即可。同時還可以使用 background-repeat 和 background-position 屬性來控制圖片的重複和位置。下面是一個例子：

div {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

在上述代碼中，我們將背景圖片添加到了<div>標籤上，並設置 background-repeat 屬性為 no-repeat，這表示背景圖片不重複。同時設置 background-position 屬性為 center top，表示背景圖片在容器中垂直居中且水平居中。

十、CSS添加背景圖片路徑怎麼找選取

CSS添加背景圖片路徑可以使用如下格式：

background-image: url("url地址");

在這裡，我們需要使用圖片文件的實際路徑來設置 URL 地址。首先，我們需要確定相對路徑和絕對路徑的概念。相對路徑是相對於當前HTML文件的路徑，而不是伺服器的根目錄，例如：

background-image: url("images/background.jpg");

這裡我們設置了圖片文件的相對路徑，相對路徑中的 images 目錄是在 HTML 文件所在的目錄下。如果圖片文件在與 HTML 文件相同的目錄下，則可以使用如下的簡寫方式：

background-image: url("background.jpg");

如果圖片文件不在 HTML 文件所在的目錄下，也可以使用相對路徑來指定。例如，假設圖片文件在與 HTML 文件相同的父目錄中的images目錄下，則可以使用如下的相對路徑：

background-image: url("../images/background.jpg");

在上述代碼中，我們通過 ../ 表示返回到上一級目錄，然後進入 images 目錄，最終找到了我們需要引用的圖片文件。如果圖片文件在伺服器的根目錄下，則可以使用絕對路徑來指定，例如：

background-image: url("http://www.example.com/images/background.jpg");

在上述代碼中，我們直接指定了圖片文件的完整URL地址，這樣瀏覽器就可以在該地址上找到圖片文件了。

原創文章，作者：IPWGW，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/331260.html