Div не прозрачен при размещении на холсте

Итак, я хочу, чтобы div имел прозрачный фон для отображения на холсте. Потому что сейчас у меня есть то, что он прозрачен, но игнорирует холст, как вы можете видеть здесь (http://hyun.x10host.com/vetements/Windbreaker_Script.html). Есть холст с эффектом, но по какой-то причине отображается цвет фона страницы, а холст игнорируется. Я не знаю, закрывает ли div холст или прозрачные изображения png.

html,
body {
    background: -moz-linear-gradient(top, #1f1f1f 0%, #3b3b3b 100%);
    background: -webkit-linear-gradient(top, #1f1f1f 0%, #3b3b3b 100%);
    background: linear-gradient(to bottom, #1f1f1f 0%, #3b3b3b 100%);
    width: 100%;
    height: 5000px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    min-height: 100vh;
    scroll-behavior: smooth;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.intro_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1001;
    background-color: #242424;
    display: block;
}

@-webkit-keyframes small {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 2rem);
        transform: translate(0, 2rem);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes small {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 2rem);
        transform: translate(0, 2rem);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes big {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, -3rem);
        transform: translate(0, -3rem);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes big {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, -3rem);
        transform: translate(0, -3rem);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.product {
    position: relative;
    display: flex;
    width: 100%;
    height: 90%;
    z-index: 2;
    padding: 0 2rem;
}

.product-photo {
    padding: 80px 0px 0px 0px;
    width: 100%;
    height: 100%;
}

.product-photo img:nth-child(1) {
    width: 300px;
    height: auto;
    margin-top: 10%;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-animation-name: small;
    animation-name: small;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.product-photo img:nth-child(2) {
    width: 500px;
    height: auto;
    -webkit-animation-name: big;
    animation-name: big;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
}

.Script_text {
    width: 40%;
    height: auto;
}

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8" />
    <title>HYUN - Men hoodies</title>
    <link rel = "stylesheet" href = "style/Windbreaker_Script.css">
    <link rel = "icon" type = "image/icon" href = "images/icons/logo.ico" />
    <link rel = "stylesheet" media = "screen" href = "https://fontlibrary.org/face/bebas" type = "text/css" />
    <link rel = "stylesheet" href = "assets/cloth-list_assets/normalize.min.css">
    <link rel = "stylesheet" href = "assets/cloth-list_assets/reset.min.css">

    <link rel = "stylesheet" href = "assets/women-men_assets/web/assets/mobirise-icons/mobirise-icons.css">
    <link rel = "stylesheet" href = "assets/women-men_assets/tether/tether.min.css">
    <link rel = "stylesheet" href = "assets/women-men_assets/bootstrap/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "assets/women-men_assets/socicon/css/styles.css">
    <link rel = "stylesheet" href = "assets/women-men_assets/theme/css/style.css">
    <link rel = "stylesheet" href = "assets/women-men_assets/mobirise/css/mbr-additional.css" type = "text/css">

    <script src = "https://code.jquery.com/jquery-3.1.1.js"></script>

    <script type = "text/javascript">
        $(window).on('beforeunload', function () {
            $(window).scrollTop(0);
        });
        $(document).ready(function () {
            $('div.intro_bg').delay(100).fadeOut(500);
        });
    </script>
</head>

<body>
    <header>
        <div class = "intro_bg"></div>
        <div class = "navbar">
            <div class = "menu-icon">
                <span class = "menu-icon__line menu-icon__line-left"></span>
                <span class = "menu-icon__line"></span>
                <span class = "menu-icon__line menu-icon__line-right"></span>
            </div>

            <a href = "Home.html"><img class = "navlogo" src = "images/logo.jpg"></a>
            <a href = "Home.html"><img class = "navcart" src = "images/icons/shopping_cart.png">
                <h6 class = "shopping_cart_amount"><b>0</b></h6>
            </a>
        </div>

        <script type = "text/javascript">
            var opened = false;
            $('.menu-icon').click(function (e) {
                if ($("body").hasClass("nav-active")) {
                    $(".nav__content").fadeOut(300);
                } else {
                    $(".nav__content").fadeIn(300);
                }
            });
        </script>

        <div class = "nav_menu">
            <div class = "nav__content" style = "display: none;">
                <ul class = "nav__list">
                    <table class = "nav_table" border = "0" align = "center">
                        <tr>
                            <th>
                                <a href = "Men.html">
                                    <li class = "nav__list-main" id = "men" style = "color: black;">Men</li>
                                </a>
                            </th>
                            <th>
                                <a href = "Women.html">
                                    <li class = "nav__list-main" id = "women" style = "color: black;">Women</li>
                                </a>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <a href = "Men_Bundle.html">
                                    <li class = "nav__list-item" style = "color: black;">Men bundles</li>
                                </a>
                            </td>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Women bundles</li>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">T-shirts</li>
                                </a>
                            </td>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Blouses</li>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href = "Men_Hoodie.html">
                                    <li class = "nav__list-item" style = "color: black;">Hoodies</li>
                                </a>
                            </td>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Hoodies</li>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Jackets</li>
                                </a>
                            </td>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Jackets</li>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Headware</li>
                                </a>
                            </td>
                            <td>
                                <a href = "#">
                                    <li class = "nav__list-item" style = "color: black;">Headware</li>
                                </a>
                            </td>
                        </tr>
                    </table>
                </ul>
            </div>
        </div>
    </header>

    <main>

        <div class = "product-photo">
            <img src = "images/Windbreaker (Back).png">
            <img src = "images/Windbreaker (Front).png">
            <img class = "Script_text" src = "images/Script_text.png">
        </div>
        
        <canvas style = "height: 100%; width: 99.4%; -webkit-filter: blur(2px); opacity: 0.5;"></canvas>

        <section class = "footer4 cid-rgSS3LUU5v" id = "footer4-1n" style = "bottom: 0; position:absolute; width: 100%;">

            <div class = "container">
                <div class = "media-container-row content mbr-white">
                    <div class = "col-md-3 col-sm-4">
                        <div class = "mb-3 img-logo">
                            <a href = "Men.html">
                                <img src = "assets/women-men_assets/images/logo-192x189.jpg" alt = "" title = "">
                            </a>
                        </div>
                        <p class = "mb-3 mbr-fonts-style foot-title display-7">
                            HYUN
                        </p>
                        <p class = "mbr-text mbr-fonts-style mbr-links-column display-7">
                            <a href = "#" class = "text-white">About Us</a>
                            <br><a href = "#" class = "text-white">Terms Of Service</a><br><a href = "#" class = "text-white">Selected
                                Work</a>
                            <br><a href = "#" class = "text-white">Get In Touch</a>
                        </p>
                    </div>
                    <div class = "col-md-4 col-sm-8">
                        <p class = "mb-4 foot-title mbr-fonts-style display-5">Need help?
                            <br></p>
                        <p class = "mbr-text mbr-fonts-style foot-text display-7">Can't get the right size?&nbsp;<br><br>Concerned
                            about the quality of our products?&nbsp;<br><br>Questions about the shippings and
                            conditions?&nbsp;<br><br>Need human assistance?
                            <br></p>
                    </div>
                    <div class = "col-md-4 offset-md-1 col-sm-12">
                        <p class = "mb-4 foot-title mbr-fonts-style display-7">
                            SUBSCRIBE
                        </p>
                        <p class = "mbr-text mbr-fonts-style form-text display-7">Get monthly updates and be notified
                            when new stuff comes out and when new sales hit!
                            <br></p>
                        <div class = "media-container-column" data-form-type = "formoid">
                            <div data-form-alert = "" hidden = "" class = "align-center">
                                Thanks for filling out the form!
                            </div>

                            <form class = "form-inline" action = "Men.html" method = "post" data-form-title = "Subscribe Form">
                                <input type = "hidden" value = "PeFN16GpuxO6F7tp53atFvR/meO1Z79EhlA19iJtRo2F2ehexG/h2YtjHsL5hDt3XgMZfUnR5tdHIAlKH0Ivm1XSPsIUHSzoVcBBqgOmxczO/FG7wIAsZTpqzkeUDExn"
                                    data-form-email = "true">
                                <div class = "form-group">
                                    <input type = "email" class = "form-control input-sm input-inverse my-2" name = "email"
                                        required = "" data-form-field = "Email" placeholder = "Email" id = "email-footer4-1n">
                                </div>
                                <div class = "input-group-btn m-2"><button href = "" class = "btn btn-white-outline display-4"
                                        type = "submit" role = "button">Subscribe</button></div>
                            </form>
                        </div>
                        <p class = "mb-4 mbr-fonts-style foot-title display-7">
                            <br>Follow us here!</p>
                        <div class = "social-list pl-0 mb-0">
                            <div class = "soc-item">
                                <a href = "https://twitter.com/" target = "_blank">
                                    <span class = "socicon-twitter socicon mbr-iconfont mbr-iconfont-social"></span>
                                </a>
                            </div>
                            <div class = "soc-item">
                                <a href = "https://www.facebook.com/pages/" target = "_blank">
                                    <span class = "mbr-iconfont mbr-iconfont-social mbri-mobile"></span>
                                </a>
                            </div>
                            <div class = "soc-item">
                                <a href = "https://www.youtube.com/c/" target = "_blank">
                                    <span class = "mbr-iconfont mbr-iconfont-social mbri-letter"></span>
                                </a>
                            </div>
                            <div class = "soc-item">
                                <a href = "https://instagram.com/" target = "_blank">
                                    <span class = "socicon-instagram socicon mbr-iconfont mbr-iconfont-social"></span>
                                </a>
                            </div>


                        </div>
                    </div>
                </div>
                <div class = "footer-lower">
                    <div class = "media-container-row">
                        <div class = "col-sm-12">
                            <hr>
                        </div>
                    </div>
                    <div class = "media-container-row mbr-white">
                        <div class = "col-sm-12 copyright">
                            <p class = "mbr-text mbr-fonts-style display-7">
                                © Copyright 2019 HYUN - All Rights Reserved
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script type = "text/javascript">
        $('a').click(function (e) {
            e.preventDefault();
            newLocation = this.href;
            $('body').fadeOut('slow', newpage);
        });

        function newpage() {
            window.location = newLocation;
        }
    </script>

    <script type = "text/javascript">
        var docheight = document.querySelector('body');
        canvas = document.getElementsByTagName('canvas')[0];
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;

        var ctx = canvas.getContext('2d');


        var characterList = ['gridare alla mia ex', 'Diohaunpiano', 'Die Realität ist falsch, Träume sind real',
            'الله لديه خطة', 'El amor es falso', 'Любовь это иллюзия', 'الحب خدعة', '너는내동기였어', 'Θααγαπήσωκαιπάλι',
            'वास्तविकता गलत है कि सपने सच हो रहे हैं', '나는네가네가나를사랑한다고말했을때꿈꿔왔다고생각했다', 'Liebeistfalsch',
            'No hay fin lo llaman atemporal.', 'Elamoresunailusion', 'Με άφησε σπασμένο σε κομμάτια',
            'Ηαγάπη είναι ψεύτικη', 'حذرا لا تبديل الجانبين', '현실은 잘못된 꿈을 현실위한 것입니다',
            'gridare alla mia ex', '사랑은환상이다 ', 'Реальность ошибочна мечты реальны', 'KeinEndenennteszeitlos',
            '나는네가네가나를사랑한다고말했을때꿈꿔왔다고생각했다', '사랑은환상이다 ', 'ظننت أنني أحلم  عندما قلت أنك تحبني',
            'الواقع خاطئ ، الأحلام حقيقية'
        ];

        var layers = {
            n: 7,
            letters: [300, 100, 50, 25, 20, 10, 5],
            coef: [0.1, 0.2, 0.4, 0.6, 0.8, 1, 1.2],
            size: [16, 22, 36, 40, 46, 50, 55],
            color: ['#fff', '#eee', '#ccc', '#bbb', '#aaa', '#aaa', '#aaa'],
            font: 'Courrier'
        };

        var characters = [];
        var mouseX = document.body.clientWidth / 1;
        var mouseY = document.body.clientHeight / 1;

        var rnd = {
            btwn: function (min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            choose: function (list) {
                return list[rnd.btwn(0, list.length)];
            }
        };

        function drawLetter(char) {
            ctx.font = char.size + 'px ' + char.font;
            ctx.fillStyle = char.color;

            var x = -200 + char.posX + (mouseX - canvas.width / 5) * char.coef;
            var y = -200 + char.posY + (mouseY - canvas.height / 5) * char.coef;

            ctx.fillText(char.char, x, y);
        }

        document.onmousemove = function (ev) {
            mouseX = ev.pageX - canvas.offsetLeft * 0.2;
            mouseY = ev.pageY - canvas.offsetTop * 0.2;

            if (window.requestAnimationFrame) {
                requestAnimationFrame(update);
            } else {
                update();
            }
        };

        function update() {
            clear();
            render();
        }

        function clear() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function render() {
            for (var i = 0; i < characters.length; i++) {
                drawLetter(characters[i]);
            }
        }

        function createLetters() {
            for (var i = 0; i < layers.n; i++) {
                for (var j = 0; j < layers.letters[i]; j++) {

                    var character = rnd.choose(characterList);
                    var x = rnd.btwn(0, canvas.width);
                    var y = rnd.btwn(0, canvas.height);

                    characters.push({
                        char: character,
                        font: layers.font,
                        size: layers.size[i],
                        color: layers.color[i],
                        layer: i,
                        coef: layers.coef[i],
                        posX: x,
                        posY: y
                    });

                }
            }
        }

        createLetters();
        update();
    </script>

    <script type = "text/javascript">
        var app = function () {
            var body = void 0;
            var menu = void 0;
            var menus = void 0;

            var init = function init() {
                body = document.querySelector('body');
                menu = document.querySelector('.menu-icon');
                menuItems = document.querySelectorAll('.nav__list-main');
                menuTitles = document.querySelectorAll('.nav__list-item');

                applyListeners();
            };

            var applyListeners = function applyListeners() {
                menu.addEventListener('click', function () {
                    return toggleClass(body, 'nav-active');
                });
            };

            var toggleClass = function toggleClass(element, stringClass) {
                if (element.classList.contains(stringClass))
                    element.classList.remove(stringClass);

                else
                    element.classList.add(stringClass)
            };
            init();
        }();
    </script>

    <script type = "text/javascript">
        var images = new Array()

        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "images/supreme-fall-winter-2014-collection-lookbook-2-1200x1200.png",
            "images/supreme-fall-winter-2014-collection-lookbook-2-1200x120022.png",
            "images/supreme-fall-winter-2014-collection-lookbook-2-1200x12002222.png",
            "images/Plain_front.png",
            "images/Oni_back.png",
            "images/Cherry_back.png"
        )
    </script>

    <script src = "assets/women-men_assets/web/assets/jquery/jquery.min.js"></script>
    <script src = "assets/women-men_assets/popper/popper.min.js"></script>
    <script src = "assets/women-men_assets/tether/tether.min.js"></script>
    <script src = "assets/women-men_assets/bootstrap/js/bootstrap.min.js"></script>
    <script src = "assets/women-men_assets/smoothscroll/smooth-scroll.js"></script>
    <script src = "assets/women-men_assets/parallax/jarallax.min.js"></script>
    <script src = "assets/women-men_assets/sociallikes/social-likes.js"></script>
    <script src = "assets/women-men_assets/theme/js/script.js"></script>
    <script src = "assets/women-men_assets/formoid/formoid.min.js"></script>
</body>

</html>

html css

12.03.2019 05:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

canvas{
     height: 100%;
    width: 99.4%;
    -webkit-filter: blur(2px);
    opacity: 0.2;
    position: absolute;
    top: 0;
}
.product-photo {
    padding: 80px 0px 0px 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: relative;
}

Примечание. При размещении холста за элементом .product-photo возникает проблема с положением. поэтому установка абсолютного холста для основного контейнера и div .product-photo в качестве положения относительно него решит эту проблему.

согласно холсту вопроса, который по какой-то причине игнорируется. я проверил, что у него есть проблема с положением (css), которая не помещается абсолютно в контейнер. поэтому добавлено исправление положения для обоих элементов. если возникнут проблемы, дайте мне знать

— 12.03.2019 07:31

Спасибо, проблема исправлена!

— 12.03.2019 18:00

12.03.2019 06:13