在前端開發過程中，為了頁面的美觀，往往都會給html頁面添加背景圖檔。那麼如何利用css設定html中用圖檔做背景？本章就給大家介紹css怎樣設定背景圖檔。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
程式猿的生活：打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）zhuanlan.zhihu.com
css怎樣設定背景圖檔?
css background屬性就是專門設定背景的屬性，可以設定背景色，也可以設定背景圖檔。
下面看看background可以設定的屬性：
background-color： 規定要使用的背景顔色。
background-position： 規定背景圖像的位置。
background-size： 規定背景圖檔的尺寸。
background-repeat ：規定如何重複背景圖像。
background-origin ：規定背景圖檔的定位區域。
background-clip： 規定背景的繪制區域。
background-attachment： 規定背景圖像是否固定或者随着頁面的其餘部分滾動。
background-image ：規定要使用的背景圖像。
可以看出background-image屬性就是給html頁面設定背景圖檔的屬性，下面看看它的用法
1background-image:url(1.jpg);
這樣在url()裡給出圖檔的路徑，就可以給div盒子設定一個背景圖檔；看似簡單，但有一點要注意，設定背景圖檔的盒子必須要有實質的寬度與高度，這樣才可以讓背景圖檔在顯示屏上顯示。
上面的這些background屬性如果一個一個的設定是不是感到繁瑣，其實有些屬性是可以放在一起設定的，這樣的css背景表達可以節約且優化了css檔案代碼。例：
1background:url(bgimg.gif) no-repeat5px5px;
如下圖解釋：
css設定背景圖檔的代碼執行個體
1.css設定背景圖檔自适應全屏
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>背景圖檔設定</title>
<style>
.demo{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(2.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<divclass="demo"></div>
</body>
</html>
效果圖：
下面具體分析一下css樣式的作用：
position:fixed;
top: 0;
left: 0;
這三句是讓整個div.demo盒子固定在螢幕的最上方和最左方。
width:100%;
height:100%;
這是讓整個div跟螢幕實作一模一樣的大小，進而達到全屏效果。
1min-width: 1000px;
min-width是為了實作讓螢幕寬度在1000px以内時，div的大小保持不變，也就是說在這種情況下，縮放螢幕寬度時，圖檔不要縮放（隻有在1000px以内才有效）。
1z-index:-10;
這個是讓整個div在HTML頁面中處在各個層級的下方，正常情況下，第一個建立的層級z-index的值是0，是以如果我們這裡寫成-1也可以實作，不過這裡寫-10是確定整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數字的也沒有什麼意義。用index:-10 以此能達到看上去像背景圖檔，其實是一個最普通的div，隻是層級關系變了，才讓人看上去看是背景圖檔。
1background-repeat: no-repeat;
這個css樣式是設定背景圖檔不要重複的；例子中的是一張大圖，如果是一張純色（或伴有點狀/條紋狀）的圖檔，可以讓圖檔平鋪（重複）到整個螢幕上，達到全屏效果。（repeat-x是設定橫向平鋪、repeat-y是設定豎向平鋪）
2.css設定背景圖檔透明
原圖：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>背景圖檔設定</title>
<style>
.demo{
width: 600px;
height: 200px;
background:url(1.jpg) no-repeat;
}
.demo1{
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<divclass="demo">
<divclass="demo1"></div>
</div>
</body>
</html>
效果圖：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>背景圖檔設定</title>
<style>
.demo{
width: 600px;
height: 200px;
background:url(1.jpg) no-repeat;
}
.demo1{
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<divclass="demo">
<divclass="demo1"></div>
</div>
</body>
</html>
效果圖：
原理：在背景圖檔上重疊上一層白色透明的div盒子
此方法的浏覽器相容性好，而且可以做透明的div盒子裡添加文字，實作圖檔透明但文字不透明的效果。
以上就是css如何設定背景圖檔？background屬性添加背景圖檔的詳細内容，更多請關注我！！！