在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中文網其他相關文章!