需要帮助将 tsparticles.js .SVG 多边形掩码对齐到 <section data-background="image">

编程问答 2022-05-23

问题描述

我正在尝试将来自 tsparticles 的 SVG 与我在部分数据背景标签/atrib 中的背景对齐。

            <section class="home-section bg-dark-alfa-30 parallax-2" data-background="images/full-width-images/TEST.svg" id="home">
                <div id="tsparticles"></div>
                    <script src="js/tsparticles.js"></script>
                    <script src="js/app.js"></script>

我很接近，但就是不知道具体的方法。

（稍后我会处理响应）

现在我会伸出援手来理解我做错了什么。

我从完全相同的文件创建了图像和 SVG，我检查了分辨率是否相同，但 SVG 也拒绝按照我的预期对齐。

            <section class="home-section bg-dark-alfa-30 parallax-2" data-background="images/full-width-images/TEST.svg" id="home">
                <div id="tsparticles"></div>
                    <script src="js/tsparticles.js"></script>
                    <script src="js/app.js"></script>
                <div class="js-height-full container">
                    
                    <!-- Hero Content -->
                    <div class="home-content">

                        <div class="home-text"> 
                            <h1 class="hs-line-12 font-alt mb-50 mb-xs-30">
                                <img src="images/title-logo2.png" alt="Company logo" />
                                <!--Chris <p style="color:#000000">Theobald</p>-->
                            </h1>
                            
                            <h2 class="hs-line-8 no-transp font-alt mb-50 mb-xs-30">
                                More than <p style="color:#000000">technology</p>
                            </h2>
                            
                            
                            
                            <div class="local-scroll">
                                <a href="#about" class="btn btn-mod btn-border-w btn-medium btn-round hidden-xs">See More</a>
                                <!-- <span class="hidden-xs">&nbsp;</span>-->
                                
                            </div>                                  
                        </div>
                    </div>
                    <!-- End Hero Content -->
                    
                    <!-- Scroll Down -->
                    <div class="local-scroll">
                        <a href="#about" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i><span class="sr-only">Scroll to the next section</span></a>
                    </div>
                    <!-- End Scroll Down -->
                    </div>
            </section>
            <!-- End Home Section -->

和 CSS

/* ==============================
   Home sections
   ============================== */
  
/*
 * Header common styles
 */

.home-section {
    width: 100%;
    display: block;    
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -2;
}

.home-content{
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Home content */

.home-content{
    position: relative;
}
.home-text{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

#tsparticles{
  position: static;
}

这是 1920 x 1080 它尚未随屏幕尺寸缩放，我只是在寻找一种可靠的方法来将位于 section 标签中的背景图像与来自 tsparticles app.js 的 svg 对齐

enter image description here

这个链接有点像它的问题？ 您可以在此处的预览中看到它偏离中心...

enter image description here

解决方法

我能够通过从部分标签中删除数据背景图像并使用

来修复它 
#tsparticles {
  position: absolute;
  width: 100%;
  background-image: url("https://christheobald.com/images/full-width-images/TEST.svg"); --> this fixed it here.
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

在 CSS 中

htmljavascriptparticles.jssvgsvgsvg