bounty还有5天到期。回答此问题可获得+50声望奖励。Kasheftin希望引起更多关注此问题。
下面是演示:https://jsfiddle.net/kasheftin/s9o127r3/6/
.container {
position: relative;
width: 500px;
height: 180px;
border: 1px solid #000;
}
.bg1, .bg2, .bg3, .bg4 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: 0 0;
}
.bg1 {
background: linear-gradient(90deg, transparent 0 47px, #ddd 47px 48px, transparent 48px 100%);
background-size: 48px 1px;
}
.bg2 {
background: linear-gradient(90deg, transparent 0 95px, #f00 95px 96px, transparent 96px 100%);
background-size: 96px 1px;
}
.bg3 {
background: linear-gradient(90deg, transparent 0 143px, #0f0 143px 144px, transparent 144px 100%);
background-size: 144px 1px;
}
.bg4 {
background: linear-gradient(90deg, transparent 0 335px, #000 335px 336px, transparent 336px 100%);
background-size: 336px 1px;
}
.sq1, .sq2, .sq3, .sq4, .sq5 {
position: absolute;
top: 0;
left: 0;
}
.sq1 {
width: 48px;
height: 24px;
background-color: #ccc;
}
.sq2 {
top: 30px;
width: 96px;
height: 24px;
background-color: #ccc;
}
.sq3 {
top: 60px;
width: 144px;
height: 24px;
background-color: #ccc;
}
.sq4 {
top: 90px;
width: 192px;
height: 24px;
background-color: #ccc;
}
.sq5 {
top: 120px;
width: 336px;
height: 24px;
background-color: #ccc;
}
<div class="container">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="sq1"></div>
<div class="sq2"></div>
<div class="sq3"></div>
<div class="sq4"></div>
<div class="sq5"></div>
</div>
基本上,几个有背景的div和background-position: 0 0
放置在彼此的顶部。background-size
的值为48,96,144等,这意味着它们应该均匀重叠。
它在Chrome和Safari 14.1和15.6中正常工作,但在最新的Safari 16.3中有一个问题,只有当浏览器缩放不是100%时才会发生。这就是Safari 16.3放大时的样子:
一个简单的屏幕截图测量显示,背景大小的变化正确,但背景偏移量没有放大。我正在寻找任何解决办法/破解,以克服这个问题。
1条答案
按热度按时间gopyfrb31#
尝试使用rem或em而不是px。