你会如何使用CSS样式
background-attachment
并将其应用于<img>
标签?<img src="ok.jpg">
CSS:
img {
background-attachment: fixed;
}
background-attachment
并将其应用于<img>
标签?<img src="ok.jpg">
CSS:
img {
background-attachment: fixed;
}
如果有人试图在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>
background-attachment
是 CSS 的“函数”,只能用于 background-image
。你也可以使用 position:fixed
来对图片进行类似的处理。img {
position: fixed;
}
<div class="img"></div>
CSS
.img { background-image: url('ok.jpg'); background-attachment: fixed; }
<img>
标签中使用 background-attachment。<style>
.bg-image {
background-image: url(ok.jpg);
background-attachment:fixed;
}
</style>
<div class='bg-image'></div>
或者类似这样的内容。
您可能还想为div设置height
或min-height
,以确保它显示出来。
此外,您可能还想尝试使用背景重复样式,默认情况下将在x和y上重复。
background-attachment
不严格适用于图像,而是适用于具有background-images
的元素 MDN 链接。因此,不太清楚你的问题是什么。 - Paulie_D<img>
上实现相同的效果? - user4283097