CSS 能夠輕松地實現背景圖片的滿屏顯示。要實現背景圖片滿鋪,必須使用以下兩個屬性:
background-size: cover; background-attachment: fixed;
background-size: cover;
這個屬性可以保證圖像在背景中鋪滿整個屏幕。它會把圖像擴展到填滿整個背景區域。這意味著,如果圖像比背景區域要大,那么它仍然會被拉伸以適應屏幕。
background-attachment: fixed;
這個屬性可以固定背景圖像在窗口的位置。這意味著,無論用戶滾動頁面多少次,背景圖像始終都會保持在窗口的同一位置。
HTML 代碼如下:
<body> <div class="background"></div> </body>
CSS 代碼如下:
body { margin: 0; padding: 0; height: 100%; } .background { background-image: url("圖片鏈接"); background-size: cover; background-attachment: fixed; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
代碼中的 .background 類選擇器將背景圖片應用到頁面上的一個空 div 元素。position: fixed; 使其背景保持在屏幕的頂部,top: 0; left: 0; width: 100%; height: 100% 確保該 div 填滿整個屏幕。
上一篇mysql的執行窗口