Question

我试图将移动应用的GIF放在后台＆＃39;封面＆＃39;在CSS中。在较大的屏幕上，它看起来很好 - gif将正确加载，如下所示：

然而，即使是稍微小一点的屏幕，我也无法正常缩小图像，并且会像这样溢出：

＆＃39;封面的CSS背景如下：

#deck{
    background:url('test3bg.jpg');
    position:absolute;
    top:104px;
    left:0;
    background-position:center center;
    background-size:cover;  
    width:100%;
    height:70%;
    background-repeat:no-repeat;
}

对于应用程序演示它

#appDemo{
    position:absolute;
    width:400px;
    height:600px;
    background:url('appDemo.gif');
    background-repeat: no-repeat;
    background-size:330px;
    right:8%;
    top:30px;
}

背景图片区域及其子项的HTML：

<div id="deck">
        <div id="leader">
            <div id="main">Lorem ipsum <span id="anything">dolor</span></div>
            <div id="subtitle">lorem ipsum dolor<br><span id="subtitleEmph">lorem ipsum... dolor</span></div>
        </div>
        <div id="dog">
            <img src="dog2.png" style="opacity:0;">
        </div>
        <div id="appDemo">

        </div>

    </div>

背景区域的其他相关CSS：

#dog{
    background:url('dog1.png');
    background-repeat: no-repeat;
    width:200px;
    height:200px;
    background-size:200px;
    position:absolute;
    top:100%;
    margin-top:-188px;
    left:12%;

}
#leader{
    font-family: 'montserratultra_light', sans-serif;
    font-weight:200;
    font-size:45px;
    color:#000;
    position:absolute;
    left:15%;
    top:26%;
}
#anything{
    font-family: 'montserratlight', sans-serif;
    color:#ef473a;
    text-shadow: 0 0 1px #ef473a;
    font-style:italic;
}
#leader #subtitle{
    font-family: 'montserratlight', sans-serif;
    font-size:28px;
    margin-top:15px;
}
#subtitle #subtitleEmph{
    font-family: 'montserratregular', sans-serif;
    color:#ef473a;
    font-style:italic;
}

我尝试了各种愚蠢的事情，比如编写JavaScript函数来根据文档大小和窗口大小重新缩放背景大小，但这种方法感觉不必要。有没有人知道这个问题的合理CSS解决方案？

Answer 1

像这样设置#appDemo的css：

#appDemo{
    position:absolute;
    width:auto;
    height:60%; /*you might need to play with this setting*/
    max-height: 600px;
    overflow:hidden; /*<-- added so that it does not disappear with auto width*/
    background-repeat: no-repeat;
    background-size:330px;
    right:8%;
    top:30px;
}

并将图像作为<img>元素添加到div而不是背景图像。

如何在CSS中的任何屏幕尺寸的背景封面内保留长图像？

1 个答案: