目錄

background-image: url(" ")；

background-repeat屬性（背景平鋪）

background-size屬性（設置背景圖片大小）?

background-position屬性（背景圖片位置）

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

首先要知道background-image是將圖片作為背景，使用方法為：

background-image: url("") ;

其次是關于圖片路徑問題，

如果該css文件和背景圖片在同一文件夾存在且并不包含于其他文件夾那么直接填寫back.jpg；background-image:url(back.jpg);

如果該css文件和背景圖片在同一文件夾存在且圖片包含于其他文件夾（ws）那么填寫ws/back.jpg;? ?background-image:url(ws/back.jpg);

如果該css文件和背景圖片不在同一文件夾下，（背景圖片在demo文件下，而demo文件夾和css文件所在文件夾并列）那么填寫../demo/back.jpg;

background-image:url(../demo/back.jpg);

對于css文件所在目錄來說：

“../”表示上一級目錄開始?
“./”表示當前同級目錄開始?
“/”表示根目錄開始。
“../../??”表示源文件所在目錄的上上級目錄

例如：

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

我想要用back1這張圖片，這張圖片在assets文件里，css文件在components文件里，可以看到?assets文件和components文件屬于同級目錄，所以路徑就是： url("../src/assets/back1.jpg")

2.然后就是一些與之相關的其他屬性：

background-repeat屬性（背景平鋪）

repeat ???????????????默認值，在水平方向和垂直方向都重復（默認值）
no-repeat? ? ? ? ? 不重復背景圖像
repeat-x? ? ? ? ? ? 只有水平位置會重復背景圖像
repeat-y? ? ? ? ? ? 只有垂直方向會重復背景圖像

background-size屬性（設置背景圖片大小）?

例如：

.body{width: 100%;height: 100%;background-image: url("../assets/back1.jpg") ;background-size: 200px 80px; } 這里的寬為200px，高為80px也可以將大小設置為百分比（百分比：background-size:40% 60%;不過需要注意的是，圖片大小不是按背景圖片大小的百分數來計算的，而是裝載背景圖的元素的百分比來計算。）還可以是cover和contain。 cover：保持圖像的寬高比例，將圖片縮放到正好完全覆蓋定義的背景區域，其中有一邊和背景相同contain：保持圖像的寬高比例，將圖片縮放到寬或者高正好適應定義背景的區域，但背景仍在定義的區域之內，被包含

?background-position屬性（背景圖片位置）

有三種方法：

x(長度）y(長度）
第一個值是水平位置，第二個值是垂直位置。左上角是0。單位可以是像素（0px 0px）或任何其他?css單位。如果僅指定了一個值，其他值將是50％。將背景圖像的左上角，放置在對象背景區域（x,y）所指定的位置，即定義的是背景圖片的左上角相對于背景區域左上角的偏移量

x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。?默認值為：0％0％

直接指定位置? （center、top、bottom、left、right）

總結

以上是生活随笔為你收集整理的background-image使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。