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

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

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

CSS在特定屏幕尺寸上覆盖图像

1 个答案: