css怎麼把背景圖顯示完全

在css中，可以利用“background-size”屬性把背景圖片顯示完全，該屬性用於規定背景圖像的尺寸，只需要給元素添加“background-size:100% 100%;”樣式即可把背景圖片顯示完全。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼把背景圖顯示完全

#在使用div css製作網頁時，有時需要將背景圖片全顯示在div內，那麼，如何使用css設定呢？以下舉例說明div css如何控制背景圖片全顯示出來。

1、新建一個html文件，命名為test.html，用來講解div css如何控制背景圖片全顯示出來。使用div標籤建立一個模組，用於新增背景圖片。設定div標籤的class屬性為mydiv，主要用於下面透過該class來設定css樣式。編寫標籤，頁面的css樣式將寫在該標籤內。

透過類別名稱mydiv來設定div的css樣式，使用width屬性設定div的寬度為300px，使用height屬性設定div的高度為300px。

2、在css標籤內，再透過background-image屬性設定div的背景圖片為images資料夾下面的1.jpg圖片，同時使用background-size設置背景圖片的寬度、高度佔比為100%，即將背景圖片全顯示出來。

在瀏覽器中開啟test.html文件，查看實現的效果。

總結:

1、建立一個test.html檔。

2、在檔案內，建立一個div模組。

3、在css標籤中，設定div的寬度、高度、背景圖片，再透過background-size屬性將背景寬度、高度設定為100%，實現背景圖片全顯示出來。

注意事項：

若div的寬度比例與圖片的寬高比例不一樣，背景圖片設定全顯示出來，會導致變形。

（學習影片分享：css影片教學）

以上是css怎麼把背景圖顯示完全的詳細內容。更多資訊請關注PHP中文網其他相關文章！