将背景设置为4个大小相同的图像的最佳方法是什么？

Question

我正在寻找让4张图片占据每个背景25％的最简单方法

Answer 1

我这样做有点奇怪，但它总是对我有用。

CSS

body, html {
    margin: 0px;
    padding: 0px;
}
.pA, .pB, .pC, .pD {
    position: absolute;
    width: 50vw;
    height: 50vh;
}
.pA {
    background: red;
}
.pB {
    background: green;
    margin-left: 50vw;
}
.pC {
    background: blue;
    margin-top: 50vh;
}
.pD {
    background: yellow;
    margin-top: 50vh;
    margin-left: 50vw;
}

和简单的divs

<div class="pA">
</div>
<div class="pB">
</div>
<div class="pC">
</div>
<div class="pD">
</div>

它很简单，很有效，而且很容易玩。

我猜测最佳方式（op＆＃39; s规范）会使用calc()。

Demo