㈠ css如何設置背景圖片background屬性添加背景圖片
在前端開發中提升頁面美感，背景圖片的使用必不可少。CSS中的background屬性就是實現這一目標的關鍵。它包括多個子屬性，如background-color、background-position、background-size等，其中background-image屬性正是用於設置HTML頁面的背景圖片。
設置background-image的基本語法是：background-image: url('image_path.jpg');只需要提供圖片的URL，即可為div元素賦予背景圖片。注意，為了確保圖片顯示，設置背景的div應具有明確的寬度和高度。
為了簡化代碼，可以同時設置多個屬性，如：background: url(bgimg.gif) no-repeat 5px 5px;這表示背景圖片位於右上角，不重復。CSS還可以用於實現全屏背景，如通過position: fixed; top: 0; left: 0;使div固定在屏幕頂部左邊緣，width: 100%; height: 100%;使其自適應屏幕大小。
想要達到背景圖片的透明效果，可以通過在背景圖片上疊加一層透明div，再調整z-index和background-repeat屬性。例如，z-index:-10可使div在其他元素之下，background-repeat:no-repeat阻止圖片重復。
總的來說，CSS通過background屬性提供了豐富的選項，以滿足不同場景下的背景圖片需求。熟練掌握這些技巧，你的網頁設計將更加生動多彩。
㈡ css中如何將背景圖片全屏顯示
在CSS中，如果你希望為body元素設置全屏背景圖片，可以使用background-size:100% 100%;或者background-size:cover;實現。其中，100% 100%表示背景圖片寬度和高度均佔100%，而cover屬性則會自動調整圖片大小，使其完全覆蓋背景區域，同時保持圖片的寬高比。
需要注意的是，如果body元素的高度不是固定值，背景圖片可能無法完全顯示。因此，你可以考慮為body設置一個固定的高度，或者使用其他方法確保背景圖片能夠正確顯示。
另外，如果你希望背景圖片在全屏顯示時保持一定的比例，可以使用background-size:contain;，這樣背景圖片會盡可能縮小以適應背景區域，但不會拉伸圖片。
在使用background-size屬性時，還需要注意瀏覽器兼容性問題。盡管大部分現代瀏覽器都支持background-size屬性，但在一些老舊瀏覽器中可能會出現兼容性問題，因此建議在項目中使用前進行測試。
最後，為了使背景圖片與頁面內容更好地融合，你還可以使用background-attachment:fixed;屬性，這樣背景圖片會固定在頁面上，隨滾動條滾動而不會移動。
綜上所述，通過合理設置background-size屬性，可以輕松實現將背景圖片全屏顯示的效果，提升網站的視覺效果和用戶體驗。