如何在&lt；img&gt；标签中使用CSS背景附件？ [英] How to use CSS background-attachment in <img> tag?

问题描述

如何使用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>

这篇关于如何在&lt；img&gt；标签中使用CSS背景附件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！