猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

用 css 覆盖 img - 不同设备的可视化问题

我希望制作数字婚礼请柬，尽管我不是网络开发人员。

我正在尝试创建一个具有非常简单的动画的页面，其中有一个显示邀请的信封。我使用 html 和 css 重叠了三个简单的图像：

我能够为我想要实现的目标创建代码（如下所列）。 三个图像重叠，我可以用两行简单的 JavaScript 来移动信封。当我用 Chrome 打开它时，重叠效果非常好。然而，我的问题来自以下几点：

  1. 当我用 Firefox 打开网站时，邀请函的一些像素会从信封中出来

  2. 当我从任何智能手机打开网站时，除了信封邀请尺寸问题外，所有图像都会缩放或移动到左侧。

我尝试搜索是否有任何方法以自适应方式重叠图像（从设备/浏览器的角度来看），也许只使用 JavaScript，但我没有找到任何东西。我只发现我已经在下面实现了 css 和 html 方法。我发现解决问题的最简单的方法是在正文中插入 gif，但我不太喜欢它。

我的简单代码是：

<!DOCTYPE html>

<html>

<head>

    <title>Invitation wedding</title>

    <style>

        body {

            margin: 0;

            background-color: white;

        }


        #container {

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            position: relative;

        }


        img {

            height: 50%; 

            padding: 80px 0;

            overflow: visible;  /* For Firefox */

        }


        .env {

            position: absolute;     

        }


        .partecipazione{

            height: 130%;

            padding-top: 20%;

            position: absolute;

            padding-right: 22px;

        }


        .allEnvelope{

            padding-top: 20%;

            position: absolute;

        }

    </style>

</head>

<body>

    <div id="container">

        <div class="allEnvelope">

            <img id="allEnv" src="all.png"></img> 

        </div> 

        <div class="partecipazione">

            <img id="part" src="part.png"></img>

        </div>

        <div class="env">

            <img id="envelope" src="optipng.png"></img>

        </div>

    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

    <script>

        var timeline = new TimelineMax();

        timeline.to('#envelope, #allEnv', .6, {y:290}, '+=.7');

    </script>

</body>

</html>


HUWWW
浏览 75回答 3
3回答

尚方宝剑之说

在这里我改变了一些事情：我删除了img {&nbsp;height: 50%;&nbsp;&nbsp;padding: 80px 0;&nbsp;overflow: visible;&nbsp; /* For Firefox */}然后在信封内的所有 div 周围添加一个额外的容器以进行放置：<div id="container">&nbsp; &nbsp; <div class="envelopeWrapper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="allEnvelope">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="allEnv" src="all.png"></img>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="partecipazione">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="part" src="part.png"></img>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="env">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="envelope" src="optipng.png"></img>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>款式：.envelopeWrapper{&nbsp; &nbsp; width: 603px;&nbsp; &nbsp; max-width: 95%;&nbsp; &nbsp; height: 500px;&nbsp; &nbsp; position: relative;}这里的高度只是放在屏幕中间。 max-width 适用于移动设备，如果其小于 603px 的 width，它将进行调整。还添加了 position: relative 来调整内部的 div。 在新包装器中添加了所有 div/图像的样式：.env, .partecipazione, .allEnvelope&nbsp; {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; bottom: 0;}.envelopeWrapper img{&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; height: auto;}.partecipazione{&nbsp; &nbsp; padding-left: 2%;&nbsp; &nbsp; padding-right: 6%;&nbsp; &nbsp; padding-bottom: 7%;}使用绝对位置，我将其放置在新包装器 div 底部的角落处。 我需要为 .partecipazione 添加百分比填充，因为图像没有正确剪切。它以百分比为单位，因此它将针对移动设备进行缩放。这是您更改后的代码：<!DOCTYPE html><html><head>&nbsp; &nbsp; <title>Invitation wedding</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: white;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #container {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .envelopeWrapper{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 603px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 95%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .env, .partecipazione, .allEnvelope&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .envelopeWrapper img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .partecipazione{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 2%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-right: 6%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 7%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div id="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="envelopeWrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="allEnvelope">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="allEnv" src="all.png"></img>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="partecipazione">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="part" src="part.png"></img>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="env">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="envelope" src="optipng.png"></img>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; var timeline = new TimelineMax();&nbsp; &nbsp; &nbsp; &nbsp; timeline.to('#envelope, #allEnv', .6, {y:290}, '+=.7');&nbsp; &nbsp; </script></body></html>但我认为现在你必须稍微调整一下动画脚本。
0

胡子哥哥

您可以使用 CSS 添加浏览器前缀。这是新的 CSS 代码。<style type="text/css">&nbsp;body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: white;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #container {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: -webkit-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: -webkit-flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: -ms-flexbox;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-pack: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-flex-pack: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-box-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-flex-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50%;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 80px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: visible;&nbsp; /* For Firefox */&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .env {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .partecipazione{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 130%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 20%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-right: 22px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .allEnvelope{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 20%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; }</style>
0

守着一只汪

元素可能由于多种原因重叠，通过使用 z-index 属性，我们可以确保字母保持我们想要的垂直顺序。如果您使用过的话，它与 Photoshop 中的图层相同。使用 Puschi 的上述示例，我们可以将 z-index 添加到以下类：.partecipazione {&nbsp; &nbsp;z-index: 1&nbsp;}.env {&nbsp; z-index: 2;}&nbsp;.env 类将保留在底部的默认层中，将字母放在其上方，然后将打开的信封再次放在其上方。这可以确保元素不重叠。这是一个使用 CSS 和 CSS 的 Codesandbox。 JavaScripthttps://codesandbox.io/s/sparkling-resonance-49b2w?file=/index.html:591-627通过使用 JavaScript，我们可以在浏览器加载完所有图像后触发动画，确保其播放良好。或者我们可以添加交互性，以便当用户单击或悬停信封时它会打开。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5