Question

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

<img src="ok.jpg">

CSS：

img {
  background-attachment: fixed;
}

Answer 1

你不能这样做。首先position:fixed是CSS“功能”，你只能为img { position: fixed; }提供。您也可以使用{{1}}来获取类似的视图。

{{1}}

尝试JsFiddle

Answer 2

添加此项以防其他人在 HTML 中使用 background-attachment: fixed; 标签时想要复制 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

好吧，背景附件不适用于图像src。你必须有这样的东西：

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

CSS

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

Answer 4

您通常不会对<img>代码使用背景附件。

您实际想要做的是将图像设置为身体或div之类的背景，然后将附件设置为固定。

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

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

或类似的东西。

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

此外，您可能想要使用背景重复样式，默认情况下它会在x和y上重复。

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

4 个答案: