如何解决需要帮助将 tsparticles.js .SVG 多边形掩码对齐到 <section data-background="image">
我正在尝试将来自 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"> </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 对齐
这个链接有点像它的问题? 您可以在此处的预览中看到它偏离中心...
解决方法
我能够通过从部分标签中删除数据背景图像并使用
来修复它#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 中
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。