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就是這樣，你可以看到發生了什麼。刪除這個，