使用“ngOptimizedImage”时是否可以有“background-attachment：fixed”类型行为？

Question

我正在使用 Angular (v17) 并尝试按照 docs 实现图像的延迟加载，其中说

“NgOptimizedImage 不直接支持 background-image css 属性，但它的设计目的是轻松适应将图像作为另一个元素的背景的用例。”

我已经设法实现图像的延迟加载，但未能找到一种方法来复制我在 css 中使用

background-image

和

background-attachment: fixed

时获得的静态视差（滚动过去图像）效果。

有没有办法在 Angular 中使用延迟图像加载时创建这种视差效果？

Answer 1

虽然ngOptimizedImage不直接支持background-attachment.fixed属性，但具有固定背景的父容器：

将图像包装在容器中：为 ngOptimizedImage 创建一个父容器元素。 将固定背景应用于容器：设置背景图像和背景附件：固定在容器元素上，最初使用占位符图像或占位符颜色。 将图像加载到容器中：使用容器内的 ngOptimizedImage 加载实际图像。

.fixed-background-container {
  background-image: url('placeholder-image.jpg'); /* Placeholder until image loads */
  background-attachment: fixed;
  width: 100%;
  height: 500px; /* Adjust as needed */
}

<div class="fixed-background-container">
  <ng-optimized-image [src]="imageUrl"></ng-optimized-image>
</div>