如何使用CSS样式background-attachment并将其应用于<img>标记?
background-attachment
<img>
<img src="ok.jpg">
CSS:
img { background-attachment: fixed; }
kh212irz1#
添加此代码是为了防止其他人在HTML中使用img标记时复制background-attachment: fixed;的行为。您不能按要求在<img>标记上使用背景属性,但您可以通过在图像上使用position: fixed并在其容器上使用clip-path来复制其行为。示例:
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>
carvr3hs2#
你不能这么做。首先background-attachment是CSS“函数”,你只能为background-image给予它。你也可以得到类似的视图,用position:fixed到img。
background-image
position:fixed
img { position: fixed; }
尝试JsFiddle
wztqucjr3#
好吧,background-attachment在image src中是不起作用的,你必须有这样的东西:
<div class="img"></div>
中央支助系统
.img { background-image: url('ok.jpg'); background-attachment: fixed; }
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设置height或min-height,以便确保它显示出来。你也可能想玩背景重复样式,默认情况下,它会重复的x和y。
height
min-height
4条答案
按热度按时间kh212irz1#
添加此代码是为了防止其他人在HTML中使用
img
标记时复制background-attachment: fixed;
的行为。您不能按要求在
<img>
标记上使用背景属性,但您可以通过在图像上使用position: fixed
并在其容器上使用clip-path
来复制其行为。示例:
carvr3hs2#
你不能这么做。首先
background-attachment
是CSS“函数”,你只能为background-image
给予它。你也可以得到类似的视图,用position:fixed
到img。尝试JsFiddle
wztqucjr3#
好吧,background-attachment在image src中是不起作用的,你必须有这样的东西:
中央支助系统
q5iwbnjs4#
通常不对
<img>
标记使用background-attachment。实际上,您要做的是将图像设置为body或div之类的背景,然后将附件设置为fixed。
或者类似的东西。
您可能还需要为div设置
height
或min-height
,以便确保它显示出来。你也可能想玩背景重复样式,默认情况下,它会重复的x和y。