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

你需要的，如果你想这个工作，因为目前没有这样的形象是一个宽度和高度添加到您的容器绝对的，但作为容器没有高度设置。所以我sugesstion是找出当前高度是罚款为您的图像，例如，

 
@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; } 
    } 

上述作品如何是离开第一形象静态的。所以容器还有东西在里面。

PS。 backgorund＃000就是这样，你可以看到发生了什么。删除这个，