CSS中的背景圖片是一種強大的視覺效果。而要使其完全填充背景,需要使用以下CSS屬性:
body { background-image: url("image.jpg"); background-size: cover; /* 盡可能地填充,保持縱橫比 */ background-position: center center; /* 在中心位置 */ background-repeat: no-repeat; /* 不重復 */ }
使用以上CSS屬性,背景圖片將完全填充整個背景,不會產生任何空白瑕疵。下面是一些示例效果:
/* 設置背景為白色 */ body { background-color: #FFFFFF; } /* 設置背景圖片 */ body { background-image: url("image.jpg"); } /* 圖片按比例縮放,完全填充 */ body { background-image: url("image.jpg"); background-size: cover; } /* 圖片在中心位置 */ body { background-image: url("image.jpg"); background-size: cover; background-position: center center; } /* 圖片不重復 */ body { background-image: url("image.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; }
總之,要使CSS背景圖片完全填充整個背景,只需要使用以上CSS屬性即可輕松實現。無論是通過自適應或響應式設計,或者使用CSS媒體查詢實現,都可以達到完美的視覺效果。