如何使用CSS实现懒加载（lazy loading）效果？

CSS本身并不能直接实现懒加载（Lazy Loading），因为这是HTML5引入的一个特性，通过JavaScript配合来做。不过，有一些库如Intersection Observer API或第三方插件可以帮助你在用户滚动到接近图片区域时才开始加载图片，减少初始页面加载时间。

以下是使用 Intersection Observer API 的简单示例（需要配合JavaScript）：

// 获取需要懒加载的图片元素
const lazyImages = document.querySelectorAll('img[data-src]');

// 创建观察者
function lazyLoad(entries) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
}

// 指定图片进入视口范围时触发事件
new IntersectionObserver(lazyLoad, {threshold: 0.1}).observe(lazyImages);

在这个例子中，`data-src`属性用于存储实际的图片源地址，只有当图片进入了浏览器视口的一定比例（这里设为0.1）时，才会替换`src`属性并开始加载图片。