如何在<;img>;标签中使用CSS背景附件?
如何使用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>
相关文章