屏风图

@Screen

. 将图片水平分隔为若干片，每个元素显示其中一片

. 每个元素显示的图片位置为：(当前片数-1) /(总片数-1)：从0到100%分成若干段；第一段从0开始；最后一段在100%结束

. 每片的背景图片大小background-size应为总片数*100%

. 为查看效果，以下各例采用hover触发特效，且采用公共类tile；任意调试尺寸均无异常

.tile {
    width: 320px;
    height: 180px;
    margin: 2rem auto;
    display: flex;
}

[] 2片

.2个点平分100%

.第一片在开始0，第二片在结束100%；每片的位置：0、100%

<div class="tile tile-2">
    <div></div>
    <div></div>
</div>

.tile-2>div {
    flex: 1;//2等分
    background-image: url(../imgs/bg.jpg);
    background-size: 200%;//2倍大小
    background-repeat: no-repeat;
}

.tile-2>div:nth-child(1) {
    background-position: 0;
}

.tile-2>div:nth-child(2) {
    background-position: 100%;
}

.tile-2>div:hover {
    transform: translateY(1rem);
}

[] 3片

.3个点平分100%

.第一片在开始0，第三片在结束100%；第二片在中间50%；每片的位置：0、50%、100%

<div class="tile tile-3">
    <div></div>
    <div></div>
    <div></div>
</div>

.tile-3>div {
    flex: 1;
    background-image: url(../imgs/bg.jpg);
    background-size: 300%;//3倍
    background-repeat: no-repeat;
}

.tile-3>div:nth-child(1) {
    background-position: 0;
}

.tile-3>div:nth-child(2) {
    background-position: 50%;
}

.tile-3>div:nth-child(3) {
    background-position: 100%;
}

.tile-3>div:hover {
    transform: translateY(1rem);
}

[] 4片

.4个点平分100%

.第一片在开始0，第四片在结束100%；每片的位置：0、33.3%、66.7%、100%

<div class="tile tile-4">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.tile-4>div {
    flex: 1;
    background-image: url(../imgs/bg.jpg);
    background-size: 400%;//4倍
    background-repeat: no-repeat;
}

.tile-4>div:nth-child(1) {
    background-position: 0;
}

.tile-4>div:nth-child(2) {
    background-position: 33.3%;
}

.tile-4>div:nth-child(3) {
    background-position: 66.7%;
}

.tile-4>div:nth-child(4) {
    background-position: 100%;
}

.tile-4>div:hover {
    transform: translateY(1rem);
}

[] 使用内联变量优化

<div class="tile tile-4 adv">
    <div style='--pos:0'></div>
    <div style='--pos:1'></div>
    <div style='--pos:2'></div>
    <div style='--pos:3'></div>
</div>

.tile-4.adv div {
  background-position: calc(var(--pos)*100%/(4 - 1));
}