如何在<img>标签中使用CSS背景附着(background-attachment)？

Question

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

<img src="ok.jpg">

CSS：

img {
  background-attachment: fixed;
} 

- user4283097

---

background-attachment 不严格适用于图像，而是适用于具有 background-images 的元素 MDN 链接。因此，不太清楚你的问题是什么。 - Paulie_D

有没有解决方法？如果不使用“background-image”，您可以如何在<img>上实现相同的效果？ - user4283097

你尝试做什么并不清楚...也许你可以用更多的信息和有意义的代码[编辑]你的问题。 - Paulie_D

@Ozzy，请检查我的回答，但我不确定我是否正确理解了你的问题，因为有点不清楚。 - CroaToa

Answer 1

如果有人试图在HTML中使用<img>标签来复制background-attachment: fixed;的行为，可以采用在图像上使用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>

- Cato

Answer 2

你不能这样做。首先，background-attachment 是 CSS 的“函数”，只能用于 background-image。你也可以使用 position:fixed 来对图片进行类似的处理。

img {
     position: fixed;
} 

尝试使用JsFiddle。

- CroaToa

Answer 3

好的，background-attachment属性无法将图像src应用于元素。您需要像这样使用：

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

CSS

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

- Lawrence Johnson

Answer 4

你通常不会在 <img> 标签中使用 background-attachment。

实际上，你想要做的是将图片设置为 body 或 div 等元素的背景，然后将 attachment 设置为 fixed。

<style>
    .bg-image {
        background-image: url(ok.jpg);
        background-attachment:fixed;
    }
</style>

<div class='bg-image'></div>

或者类似这样的内容。

您可能还想为div设置height或min-height，以确保它显示出来。

此外，您可能还想尝试使用背景重复样式，默认情况下将在x和y上重复。

- Todd Nestor