Overlay img с css - проблемы с визуализацией с разных устройств - PullRequest
Новая
       0

Overlay img с css - проблемы с визуализацией с разных устройств

0 голосов
/ 13 апреля 2020

Я хочу сделать цифровые приглашения на свадьбу, хотя я не веб-разработчик.

Я пытаюсь создать страницу с очень простой анимацией, в которой есть конверт с приглашением. , У меня есть три простых изображения, наложенных друг на друга с использованием 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>

Ответы [ 3 ]

1 голос
/ 13 апреля 2020

Здесь я изменил некоторые вещи:

Я удалил 

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 для мобильных устройств o, если он меньше, чем width 603px, он будет адаптироваться. Также добавлено 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>

Но я думаю, что теперь вам просто нужно немного настроить скрипт для анимации.

0 голосов
/ 13 апреля 2020

Элементы могут перекрываться по разным причинам. Используя свойство z-index, мы можем убедиться, что буква остается в вертикальном порядке, который мы хотим. Это то же самое, что и слои в Photoshop, если вы использовали это.

Используя приведенный выше пример Puschi, мы можем добавить z-index к следующим классам: 

.partecipazione {
   z-index: 1 
}

.env {
  z-index: 2;
}

.env Класс останется в слое по умолчанию внизу, поместив над ним букву, а затем снова открытый конверт. Это гарантирует, что элементы не перекрываются.

Вот код-песочница, использующая CSS & Javascript

https://codesandbox.io/s/sparkling-resonance-49b2w?file= / index. html: 591- 627

Используя JavaScript, мы можем отключить анимацию после того, как браузер загрузит все изображения, убедившись, что они воспроизводятся хорошо.

Или мы могли бы добавить интерактивность, чтобы, когда пользователь щелкает или наводит курсор на Конверт, он открывается.

0 голосов
/ 13 апреля 2020

Вы можете добавить префикс браузера с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...