CSS照片填充背景是一種常見的網頁設計技巧,可以為頁面增加視覺吸引力。下面介紹如何使用CSS實現圖片填充背景。
/* 定義背景圖片路徑 */ body { background-image: url('path/to/image.jpg'); background-size: cover; /* 將圖片縮放至完全覆蓋背景 */ background-repeat: no-repeat; /* 禁止重復 */ background-position: center center; /* 水平垂直居中 */ }
上述代碼中,我們使用了CSS的background-image屬性來定義背景圖片,同時設置了background-size、background-repeat和background-position屬性來控制圖片填充背景的方式。
其中,background-size屬性中的值可以為cover或contain。cover表示將圖片縮放至完全覆蓋背景,可能會出現部分圖片被裁剪;contain表示將圖片等比例縮放,使其完全包含在背景中,但可能留有空白。
通過定義這些屬性,我們可以在網頁中很方便地實現圖片填充背景的效果,使頁面更加美觀和生動。
上一篇div css基礎篇
下一篇css父div高度自適應