CSS 圖片懶加載（lazy loading）是一種技術，可以在頁面上快速加載圖片，而不會增加頁面加載時間。使用 CSS 圖片懶加載屬性可以使頁面的性能更好，更快，更流暢。

在 HTML 頁面中，我們通常使用 img 標簽來插入圖片，但是如果網頁中有許多圖片，那么頁面加載時間會變得很慢。使用 CSS 圖片懶加載屬性可以避免這個問題。

<img src="default-image.jpg"
data-src="lazy-image.jpg" class="lazyload" />
.lazyload {
opacity: 0;
transition: opacity .3s ease-in;
}
.lazyload.loaded {
opacity: 1;
}
.lazyload:not(.loaded) {
visibility: hidden;
}
.lazyload.loaded + noscript {
display: none;
}

在這段代碼中，我們使用了 data-src 屬性來指定需要懶加載的圖片。我們還定義了.lazyload 類，將其初始不透明度設為 0，這樣圖片不會顯示出來。當圖片成功加載后，我們使用 .loaded 類將其透明度設置為 1，并將 visibility 設置為 hidden。

最后，我們使用 .loaded 類與 noscript 標簽配合使用，以便在瀏覽器不支持 JavaScript 的情況下顯示默認圖片。

使用 CSS 圖片懶加載屬性可以提高頁面性能和用戶體驗。它是一種非常有用的技術，可以讓網站更快地加載圖片。