html - CSS 在特定屏幕尺寸上叠加图像

Question

所以我想将一些图像叠加在一起，但仅限于在 iPad/iPhone 上查看网站时。

我编写了以下代码，它本身就可以正常工作。然而，当添加@media 函数时，没有任何反应。

HTML:

<section class="logos">
    <div class="container">
        <div class="img1"><img src="./images/testing1.png" alt="">
        </div>
        <div class="img2"><img src="./images/testing2.png" alt="">
        </div>
        <div class="img3"><img src="./images/testing3.png" alt="">
        </div>
        <div class="img4"><img src="./images/testing4.png" alt="">
        </div>
        <div class="img5"><img src="./images/testing5.png" alt="">
        </div>
    </div>
</section>

CSS:

@media only screen and (min-width: 0px) and (max-width: 768px) {
.container{
    position:relative;
    left:0;
    top:0; }

.img1{
    position:absolute;
    top:0;
    left:0; }

.img2{
    position:absolute;
    top:0;
    left:0; }

.img3{
    position:absolute;
    top:0;
    left:0; }

.img4{
    position:absolute;
    top:0;
    left:0; }

.img5{
    position:absolute;
    top:0;
    left:0; }
}

Answer 1

如果您希望它起作用，您需要为您的容器添加宽度和高度，因为目前没有任何东西，所以图像是绝对的，但由于容器没有设置高度。所以我的建议是找出适合您图像的当前高度，例如，

@media only screen and (min-width: 0px) and (max-width: 768px) {    .container {      position: relative;      background:#000;      width: 300px;      height: 300px;      clear:both;      display: inline-block;        }    .img1{        position:absolute;        top:0;        left:0; }    .img2{        position:absolute;        top:0;        left:0; }    .img3{        position:absolute;        top:0;        left:0; }    .img4{        position:absolute;        top:0;        left:0; }    .img5{        position:absolute;        top:0;        left:0; }    }

另一种解决方案如下

    .logos .container {      position: relative; }    .logos .container img {      width: 100%;      height: auto; }    @media only screen and (min-width: 0px) and (max-width: 768px) {    .img2{        position:absolute;        top:0;        left:0; }    .img3{        position:absolute;        top:0;        left:0; }    .img4{        position:absolute;        top:0;        left:0; }    .img5{        position:absolute;        top:0;        left:0; }    }

上面的工作原理是将第一张图片保留为静态。所以容器里还有东西。

附言。 backgorund #000 只是为了让您可以看到发生了什么。删除这个，