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

Question

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

<img src="ok.jpg">

CSS：

img {
  background-attachment: fixed;
} 

Answer 1

你不能这么做。首先，background-attachment是CSS的“函数”，你只能在background-image中使用它。你也可以得到类似的视图，使用position:fixed到img。

img {
     position: fixed;
} 

试试JsFiddle

Answer 2

添加这个，以防其他人在这里复制background-attachment: fixed;的行为，同时在HTML中使用img标记。

您不能根据请求在<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>

​

Answer 3

好吧，背景连接不会对图像源起作用。你必须要有这样的东西：

<div class="img"></div>

CSS

.img { background-image: url('ok.jpg'); background-attachment: fixed; }