科技知識動態：css如何設置背景圖片？background屬性添加背景圖片

2021-05-19 14:25:26

導讀跟大家講解下有關css如何設置背景圖片？background屬性添加背景圖片，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css如何

跟大家講解下有關css如何設置背景圖片？background屬性添加背景圖片，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css如何設置背景圖片？background屬性添加背景圖片，小編也收集到了有關css如何設置背景圖片？background屬性添加背景圖片的相關資料，希望大家看到了會喜歡。

在前端開發過程中，為了頁面的美觀，往往都會給html頁面添加背景圖片。那么如何利用css設置html中用圖片做背景？本章就給大家介紹css怎樣設置背景圖片。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

推薦手冊：CSS在線手冊

css怎樣設置背景圖片?

css background屬性就是專門設置背景的屬性，可以設置背景色，也可以設置背景圖片。

下面看看background可以設置的屬性：

background-color：規定要使用的背景顏色。

background-position：規定背景圖像的位置。

background-size：規定背景圖片的尺寸。

background-repeat ：規定如何重復背景圖像。

background-origin ：規定背景圖片的定位區域。

background-clip：規定背景的繪制區域。

background-attachment：規定背景圖像是否固定或者隨著頁面的其余部分滾動。

background-image ：規定要使用的背景圖像。

可以看出background-image屬性就是給html頁面設置背景圖片的屬性，下面看看它的用法

background-image:url(1.jpg);

這樣在url()里給出圖片的路徑，就可以給div盒子設置一個背景圖片；看似簡單，但有一點要注意，設置背景圖片的盒子必須要有實質的寬度與高度，這樣才可以讓背景圖片在顯示屏上顯示。

上面的這些background屬性如果一個一個的設置是不是感到繁瑣，其實有些屬性是可以放在一起設置的，這樣的css背景表達可以節約且優化了css文件代碼。例：

background:url(bgimg.gif) no-repeat 5px 5px;

如下圖解釋：

相關文章推薦： 1.css如何讓背景圖片平鋪？css背景圖片平鋪四種方式介紹 2.html怎么添加背景圖片且讓圖片平鋪整個頁面？（代碼示例） 3.css如何實現固定的背景圖像相關視頻推薦：1.CSS視頻教程-玉女心經版

css設置背景圖片的代碼實例

1.css設置背景圖片自適應全屏

<!DOCTYPE html><html><head><meta charset="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><div class="demo"></div></body></html>

效果圖：

下面具體分析一下css樣式的作用：

position:fixed; top: 0; left: 0;

這三句是讓整個div.demo盒子固定在屏幕的最上方和最左方。

width:100%; height:100%;

這是讓整個div跟屏幕實現一模一樣的大小，從而達到全屏效果。

min-width: 1000px;

min-width是為了實現讓屏幕寬度在1000px以內時，div的大小保持不變，也就是說在這種情況下，縮放屏幕寬度時，圖片不要縮放（只有在1000px以內才有效）。

z-index:-10;

這個是讓整個div在HTML頁面中處在各個層級的下方，正常情況下，第一個創建的層級z-index的值是0，所以如果我們這里寫成-1也可以實現，不過這里寫-10是確保整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數字的也沒有什么意義。用index:-10 以此能達到看上去像背景圖片，其實是一個最普通的div，只是層級關系變了，才讓人看上去看是背景圖片。

background-repeat: no-repeat;

這個css樣式是設置背景圖片不要重復的；例子中的是一張大圖，如果是一張純色（或伴有點狀/條紋狀）的圖片，可以讓圖片平鋪（重復）到整個屏幕上，達到全屏效果。（repeat-x是設置橫向平鋪、repeat-y是設置豎向平鋪）

2.css設置背景圖片透明

原圖：

<!DOCTYPE html><html><head><meta charset="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><div class="demo"><div class="demo1"></div></div></body></html>

效果圖：