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

sqserrrh 于 11个月前发布在 Go

关注(0)|答案(1)|浏览(222)

我正在使用Angular（v17），并试图按照docs实现图像的延迟加载，这意味着
NgOptimizedImage不直接支持background-image css属性，但它旨在轻松适应将图像作为另一个元素的背景的使用情形。
我已经设法实现了图像的延迟加载，但是没有找到一种方法来复制静态视差（滚动过去的图像）效果，这是我在css中使用background-attachment: fixed和background-attachment: fixed时的效果。
有没有一种方法可以在Angular中使用惰性图像加载时创建这种视差效果？

css

来源：https://stackoverflow.com/questions/77717972/is-it-possible-to-have-background-attachment-fixed-type-behaviour-when-using

1条答案

按热度按时间

5cnsuln71#

虽然ngOptimizedImage不直接支持background-attachment.fixed属性，但具有固定背景的父容器：
将图像 Package 在容器中：为ngOptimizedImage创建父容器元素。将固定背景应用于容器：在容器元素上设置background-image和background-attachment：fixed，最初使用占位符图像或占位符颜色。将图像加载到容器中：在容器中使用ngOptimizedImage加载实际图像。

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

个字符

赞(0）回复(0）举报 11个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答