可以使用和两个相似的图像来完成。background- attachement:fixed
这是一个简单的示例：
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.@R_95_2419@ {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="@R_95_2419@">
</div>
您可以轻松缩放许多图像：
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.@R_95_2419@ {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.@R_95_2419@:first-child {
margin-top:200px;
}
<div class="@R_95_2419@">
</div>
<div class="@R_95_2419@" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="@R_95_2419@" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.@R_95_2419@ {
height: 200px;
background: grey;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
<div class="@R_95_2419@">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="@R_95_2419@" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="@R_95_2419@" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="@R_95_2419@" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.@R_95_2419@ {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="@R_95_2419@">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="@R_95_2419@" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="@R_95_2419@" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="@R_95_2419@" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.@R_95_2419@ {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.@R_95_2419@ img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of @R_95_2419@ + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="@R_95_2419@">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.@R_95_2419@ {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="@R_95_2419@">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="@R_95_2419@" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="@R_95_2419@" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>
602392714
清零编程群