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

wnvonmuf  于 2023-03-20  发布在  其他
关注(0)|答案(4)|浏览(166)

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

<img src="ok.jpg">

CSS:

img {
  background-attachment: fixed;
}
kh212irz

kh212irz1#

添加此代码是为了防止其他人在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>
carvr3hs

carvr3hs2#

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

img {
     position: fixed;
}

尝试JsFiddle

wztqucjr

wztqucjr3#

好吧,background-attachment在image src中是不起作用的,你必须有这样的东西:

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

中央支助系统

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

q5iwbnjs4#

通常不对<img>标记使用background-attachment。
实际上,您要做的是将图像设置为body或div之类的背景,然后将附件设置为fixed。

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

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

或者类似的东西。
您可能还需要为div设置heightmin-height,以便确保它显示出来。
你也可能想玩背景重复样式,默认情况下,它会重复的x和y。

相关问题