CSS的外部樣式表可以包含圖片以及其他的資源文件,這樣可以讓我們的頁面更加豐富和美觀。
/* 在外部樣式表中引入圖片 */ body { background-image: url("background.jpg"); background-size: cover; }
上面的代碼中,我們使用了background-image屬性來設置背景圖片,并使用了background-size屬性來控制圖片的尺寸,使其占滿整個頁面。
/* 在外部樣式表中引入多個圖片 */ .banner { background-image: url("banner.jpg"), url("banner-overlay.png"); background-position: center center, center top; background-repeat: no-repeat, repeat; }
如果需要在同一個元素中引入多個圖片,只需要在background-image屬性中逗號分隔即可,同時使用background-position和background-repeat屬性來控制圖片的位置和重復方式。
/* 在外部樣式表中引入CSS Sprite圖像 */ .nav { background-image: url("sprites.png"); background-position: -40px -20px; width: 20px; height: 20px; }
使用CSS Sprites可以將多個小圖片合并成一張大圖片,這樣可以減少網頁的請求次數,提高頁面的加載速度。在上面的代碼中,我們使用了background-position屬性來指定需要顯示的圖片的位置,同時使用width和height屬性來設置圖片的大小。
總的來說,使用外部樣式表可以讓我們更好更方便的管理和維護網頁的樣式和資源文件,同時可以提高網頁的加載速度和用戶體驗。
上一篇css外部樣式數字加粗
下一篇css外鏈代碼