CSS 的背景圖片是網頁美化的重要元素之一,如何讓這背景圖片滿屏又顯得美觀呢?
/*定義背景圖片*/ body { background-image: url('example.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; }
其中,background-size 屬性定義背景圖片的尺寸。cover 表示圖片會被縮放到能夠完整覆蓋背景區域,并保持比例;background-position 屬性則定義圖片在背景區域內的位置。這兩個屬性的配合可以實現背景圖片滿屏的效果。
但需要注意的是,使用這個方法的話,當瀏覽器窗口變小的時候,圖片將被自動裁剪以適應新的大小。所以在選擇背景圖片的時候,要保證圖片的正中央不會錯過整個圖案或文本的重要部分。