如何在<img>标签中使用CSS背景附件?

2022-03-24 00:00:00 image background-image jquery css

如何使用CSS样式background-attachment并将其应用于<img>标记?

<img src="ok.jpg">

css:

img {
  background-attachment: fixed;
} 

HTML

添加此内容,以防其他任何人在推荐答案中使用img标记时希望复制background-attachment: fixed;的行为。

您不能按要求对<img>标记使用背景属性,但您可以通过在图像上使用position: fixed并在其容器上使用clip-path来复制其行为。

示例:

div {
  position: relative;
  height: 200px;
  margin: 50px 10px;
  clip-path: inset(0);
}

img {
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

body {
  min-height: 400px;
}
<div>
  <img src="https://picsum.photos/id/237/200/300">
</div>

相关文章