css三张照片放一个位置

CSS中有各种强大的布局方式，其中一种是把三张照片放在同一个位置上。下面我们就来看看如何用CSS实现这个功能。

 /*
        首先，我们要给这个位置设置一个相对定位，这样三张照片才能在同一个位置上
    */
    position: relative;
    
    /*
        然后，我们将这个位置设为容器，三张照片设为容器的子元素
    */
    .container {
        position: relative;
        height: 200px; /* 根据需要修改高度 */
        width: 100%; /* 根据需要修改宽度 */
        overflow: hidden;
    }
    .img1, .img2, .img3 {
        position: absolute;
    }
    
    /*
        下面给出三个子元素的位置
    */
    .img1 {
        top: 0;
        left: 0;
    }
    .img2 {
        top: 0;
        left: 33.33%;
    }
    .img3 {
        top: 0;
        left: 66.66%;
    }
    
    /*
        最后，设置图片大小和透明度
    */
    img {
        height: 100%;
        width: 100%;
        opacity: 0.7; /* 根据需要修改透明度 */
    } 

在上面的代码中，我们首先将容器设为相对定位，然后给容器和子元素设置一些必要的属性，例如高度、宽度和溢出等。接着，我们将三张照片设为容器的子元素，并分别给它们设置了相对应的位置。最后，我们给图片设置大小和透明度。

这样，我们就成功地用CSS将三张照片放在了同一个位置上，而且还可以通过修改容器和子元素的属性来达到自己想要的效果。