一、CSS中图片路径的基本概念

1. 相对路径

相对路径通常使用以下格式：

  • ./images/picture.jpg：表示当前目录下的images文件夹中的picture.jpg文件。
  • ../images/picture.jpg：表示当前页面的上一级目录下的images文件夹中的picture.jpg文件。

2. 绝对路径

绝对路径通常使用以下格式：

  • http://www.example.com/images/picture.jpg：指向互联网上的具体图片文件。

二、修改图片路径的技巧

1. 使用CSS精灵技术

实现步骤：

  1. 创建一个包含所有图片的精灵图。
  2. 设置元素的background-image属性为精灵图。
  3. 使用background-position属性来定位所需的图片部分。
.sprite {
  width: 100px;
  height: 100px;
  background-image: url('sprite.png');
  background-position: -50px -50px; /* 根据需要调整坐标 */
}

2. 动态修改图片路径

使用JavaScript实现：

function changeImage() {
  var img = document.getElementById('image');
  img.src = 'new-image.jpg'; // 修改图片路径
}

使用CSS动画实现：

@keyframes changeImage {
  0% {
    background-image: url('image1.jpg');
  }
  100% {
    background-image: url('image2.jpg');
  }
}

.image-container {
  width: 200px;
  height: 200px;
  background-size: cover;
  animation: changeImage 2s linear infinite;
}

3. 图片懒加载

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

三、总结