时间戳

首页 > 解决方案 > 用 css 覆盖 img - 来自不同设备的可视化问题

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

问题描述

我正在寻找制作数字婚礼请柬，即使我不是网络开发人员。

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

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

  1. 当我用 Firefox 打开网站时，一些邀请的像素会从信封中出来
  2. 当我从任何智能手机打开网站时，除了信封邀请尺寸问题之外，所有图像都会在左侧缩放或移动。

我试图搜索是否有任何方法以自适应方式重叠图像（从设备/浏览器的角度来看），也许只使用 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>

标签： javascripthtmlcss

解决方案

在这里我改变了一些东西：

我删除了 

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>

款式：

.envelopeWrapper{
    width: 603px;
    max-width: 95%;
    height: 500px;
    position: relative;
}

这里的高度只是把它放在屏幕的中间。它max-width适用于移动设备，如果它小于width603 像素，它将适应。还添加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%;
}

使用绝对位置，我将其放置在新包装器 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>

但我认为现在你只需要稍微调整动画的脚本。

推荐阅读