Javascript 使用css覆盖img-来自不同设备的可视化问题_Javascript_Html_Css

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

javascript html css

Javascript 使用css覆盖img-来自不同设备的可视化问题,javascript,html,css,Javascript,Html,Css,我正在寻找制作数字婚礼请柬，尽管我不是一个网络开发者我正在尝试创建一个带有非常简单动画的页面，其中有一个信封显示邀请。我有三个简单的图像重叠使用html和css：前信封- 邀请书— 打开的信封- 我能够为我想要实现的目标创建代码（如下所列）。有三个图像重叠，我可以用两行简单的JavaScript移动信封。当我用Chrome打开它时，重叠效果非常好。然而，我的问题在于以下几点：当我用Firefox打开网站时，信封里会出现一些邀请的像素当我从任何智能手机打开网站时，除了信封尺寸问题之外

我正在寻找制作数字婚礼请柬，尽管我不是一个网络开发者

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

前信封-
邀请书—
打开的信封-

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

当我用Firefox打开网站时，信封里会出现一些邀请的像素

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

我试图搜索是否有任何方法可以自适应地重叠图像（从设备/浏览器的角度），可能只使用JavaScript，但我没有找到任何方法。我发现只有css和html方法，我已经在下面实现了。我发现解决这些问题最简单的方法就是在身体里插入gif，但我不太喜欢它

我的简单代码是：

<!DOCTYPE html>
<html lang="it">
<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>


邀请婚礼
身体{
保证金：0；
背景色：白色；
}
#容器{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
img{
身高：50%；
填充：80px0；
溢出：可见；/*适用于Firefox*/
}
环境署署长{
位置：绝对位置；
}
帕西帕齐翁{
身高：130%；
垫面：20%；
位置：绝对位置；
右边填充：22px；
}
艾伦弗洛普先生{
垫面：20%；
位置：绝对位置；
}
var timeline=新的TimelineMax（）；
timeline.to（'envelope，'allEnv'，.6，{y:290}，+=.7'）；

您可以在CSS中添加浏览器前缀。这里是新的CSS代码

<style type="text/css">

 body {
            margin: 0;
            background-color: white;
        }

        #container {
            height: 100vh;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: 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>


身体{
保证金：0；
背景色：白色；
}
#容器{
高度：100vh；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
位置：相对位置；
}
img{
身高：50%；
填充：80px0；
溢出：可见；/*适用于Firefox*/
}
环境署署长{
位置：绝对位置；
}
帕西帕齐翁{
身高：130%；
垫面：20%；
位置：绝对位置；
右边填充：22px；
}
艾伦弗洛普先生{
垫面：20%；
位置：绝对位置；
}

在这里，我更改了一些内容：

我搬走了

img {
 height: 50%; 
 padding: 80px 0;
 overflow: visible;  /* For Firefox */
}

然后在信封内的所有div周围添加一个额外的容器以放置：

<div id="container">
    <div class="envelopeWrapper">
        <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>
</div>

这里的高度就是把它放在屏幕中间。

max width

适用于移动设备o，如果其小于603px的

width

，它将进行调整。还添加了

position:relative

，以在内部调整div。在新包装中添加了所有div/图像的样式：

.env, .partecipazione, .allEnvelope  {
    position: absolute;     
    right: 0;
    left: 0;
    bottom: 0;
}
.envelopeWrapper img{
    max-width: 100%;
    height: auto;
}
.partecipazione{
    padding-left: 2%;
    padding-right: 6%;
    padding-bottom: 7%;
}

使用position-absolute，我将其放置在新wrapper-div底部的拐角处。我需要为.partecipazione添加带有百分比的填充，因为图像没有正确剪切。它以%为单位，因此它将适合移动设备

这是您更改的代码：

<!DOCTYPE html>
<html lang="it">
<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;
        }
        .envelopeWrapper{
            width: 603px;
            max-width: 95%;
            height: 500px;
            position: relative;
        }
        .env, .partecipazione, .allEnvelope  {
            position: absolute;     
            right: 0;
            left: 0;
            bottom: 0;
        }
        .envelopeWrapper img{
            max-width: 100%;
            height: auto;
        }
        .partecipazione{
            padding-left: 2%;
            padding-right: 6%;
            padding-bottom: 7%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="envelopeWrapper">
            <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>
    </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>


邀请婚礼
身体{
保证金：0；
背景色：白色；
}
#容器{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.信封{
宽度：603px；
最大宽度：95%；
高度：500px；
位置：相对位置；
}
.env、.partecipazione、.allEnvelope{
位置：绝对位置；
右：0；
左：0；
底部：0；
}
.信封{
最大宽度：100%；
高度：自动；
}
帕西帕齐翁{
左：2%；
右：6%；
垫底：7%；
}
var timeline=新的TimelineMax（）；
timeline.to（'envelope，'allEnv'，.6，{y:290}，+=.7'）；

但我认为现在您必须稍微调整动画的脚本。

元素可能由于各种原因重叠，通过使用属性z-index，我们可以确保字母保持在我们想要的垂直顺序。如果您使用过，它与Photoshop中的图层相同

使用Puschi的上述示例，我们可以将z-index添加到以下类中：

.partecipazione {
   z-index: 1 
}

.env {
  z-index: 2;
}

env类将保留在底部的默认层中，将字母放在上面，然后再将打开的信封放在上面。这样可以确保元素不会重叠

这是一个代码沙盒

.partecipazione {
   z-index: 1 
}

.env {
  z-index: 2;
}