在前端開發過程中，為了頁面的美觀，往往都會給html頁面添加背景圖片。那么如何利用css設置html中用圖片做背景？本章就給大家介紹css怎樣設置背景圖片。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
web前端全棧資料粉絲福利（面試題、視頻、資料筆記、進階路線）
更多相關視頻：
0基礎前端利用『HTML+CSS』制作你喜歡的暗黑破壞神網頁開發：BV1C54y1X7ro
前端發展簡史，功能以及未來趨勢！（你值得觀看）：BV1w5411s7e4
給想學編程又無從下手的小白一些建議：BV1Zf4y117ji
「HTML+CSS」實現妙筆千山播放器制作（思路講解＋代碼+成品效果）！：BV18p4y1Q7Y1
前端面試，跳槽必刷200+真面試題，讓你披荊斬棘走進大廠：BV1bz4y1d7Ys
十年前端：為你講解前端之路：BV1L541147hW
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屬性添加背景圖片的詳細內容，更多請關注我！！！
