使用内联图像搜索固定的背景效果

最近，在从事客户端项目时，我需要对图像的特定视觉效果。背景图像，使用background-attachment: fixed; ，很容易达到这种固定的滚动效果 - 即使页面滚动，图像仍然保持静止。这种效果虽然不经常使用，但可能会引人注目，尤其是在巧妙地应用时。

目录

• 为什么使用<img alt="使用内联图像搜索固定的背景效果" >而不是background-image ？
• 使用CSS background-image
• 内联图像的clip-path技巧
• 更好的方法？

最初，我旨在使用内联图像复制此固定效果（<img alt="使用内联图像搜索固定的背景效果" > ）代替CSS背景图像。这里提供了所需效果的演示。此演示的代码在此GIT存储库中（注意：这是一个Next.js项目）。将以RAW HTML的简化Code​​pen示例。

为什么使用<img alt="使用内联图像搜索固定的背景效果" >而不是background-image ？

有几个原因激发了我对<img alt="使用内联图像搜索固定的背景效果" >标签：

• 更容易的懒惰加载。
• 通过alt文本改进了SEO和可访问性。
• 使用srcset / sizes优化加载性能。
• 通过浏览器优化图像选择<picture></picture>标签。
• 直接为用户保存图像（无DevTools）。

使用<img alt="使用内联图像搜索固定的背景效果" >当图像被认为是内容而不是仅装饰时，通常是优选的标签。我的解决方案涉及clip-path CSS属性。让我们将其与background-image方法进行比较。

1。使用CSS background-image

传统方法使用background-image ：

 。
  背景图像：url（“ nice_bg_image.jpg”）;
  背景重复：无重复；
  背景大小：封面；
  背景位置：中心；
  背景 - 固定；
}

但是，此方法有局限性。该图像没有将其视为内容，从而影响可访问性（屏幕读取器）。仅当图像填充或以视口内为中心时，它也最佳地发挥作用。偏心图像需要媒体查询，以在不同设备上正确定位。

2。在内联图像上使用clip-path技巧

利用clip-path堆栈溢流解决方案提供了一种替代方法：

 .image-container {
  位置：相对；
  身高：200px;
  剪辑路径：插图（0）;
}

。图像 {
  对象拟合：封面；
  位置：固定；
  左：0;
  顶部：0;
  宽度：100％；
  身高：100％；
}

这种方法保持<img alt="使用内联图像搜索固定的背景效果" >标签的优势。但是，它不太简洁， clip-path提出了挑战。例如，像border-radius这样的简单样式需要对clip-path本身进行修改。 clip-path内的精确图像定位也可能很复杂。

更好的方法？

最终，我恢复使用CSS background-image ，承认其局限性。是否有人以更优雅的方式成功地以内联图像实现了这种固定的滚动效果？我很高兴听到您的解决方案！

以上是使用内联图像搜索固定的背景效果的详细内容。更多信息请关注PHP中文网其他相关文章！