在CSS中,设置三张图片其实很简单,我们可以用以下代码实现:
/* 容器区域 */
.container {
width: 100%;
height: 500px;
position: relative;
}
/* 第一张图片 */
.image1 {
position: absolute;
top: 0;
left: 0;
width: 33.33%;
height: 100%;
background-image: url('image1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
/* 第二张图片 */
.image2 {
position: absolute;
top: 0;
left: 33.33%;
width: 33.33%;
height: 100%;
background-image: url('image2.jpg');
background-repeat: no-repeat;
background-size: cover;
}
/* 第三张图片 */
.image3 {
position: absolute;
top: 0;
left: 66.67%;
width: 33.33%;
height: 100%;
background-image: url('image3.jpg');
background-repeat: no-repeat;
background-size: cover;
}