內聯CSS(Inline CSS)是指將CSS樣式直接添加到HTML標簽的style屬性中,以實現對該標簽的樣式設定。而內聯CSS背景圖片代碼則可以讓我們在樣式中添加背景圖片,從而美化網頁。
<div style="background-image: url('example.jpg'); background-repeat: no-repeat; background-size: cover;"></div>
以上代碼代表我們給一個div添加了背景圖片example.jpg,且使得圖片不重復出現(background-repeat: no-repeat;),同時讓圖片大小覆蓋整個div容器(background-size: cover;)。
實際使用時,我們需要根據自己的需求調整代碼中的url、background-repeat和background-size這三個屬性值,來呈現我們想要的效果。
除了div,我們還可以對其他HTML標簽添加內聯CSS背景圖片代碼,如以下代碼片段實現將img標簽換成一個自定義的背景圖片:
<img src="example.jpg" style="display: none;">
<div style="background-image: url('example.jpg'); height: 400px;"></div>
以上代碼將img標簽中的圖片隱藏(display: none;),而將背景圖片添加到div中,并設置div容器的高度為400像素(height: 400px;)。這樣做的好處是,當圖片加載失敗時,我們的網頁仍會呈現我們自定義的背景圖片,從而保證了頁面的美觀。