首页 \ 问答 \ 在正确的图层上获取particles.js？(Get particles.js on the correct layer?)

在正确的图层上获取particles.js？(Get particles.js on the correct layer?)

 我不能让particle.js作为背景工作。 它涵盖了整个页面，我尝试为我想要覆盖particle.js的所有内容设置更高的z-index（50）。 这是粒子编码器 。 codepen没有背景，因此粒子不可见。  
 下面的代码是我试图设置为<section id="services"> 。  
<!-- particles.js container --> 
<div id="particles-js"></div> 
<!-- stats - count particles --> 
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
 
 问题是它涵盖了<section>内的所有内容，不确定原因。  
 你将要看到的代码只不过是一个被诅咒的'bootstrap模板。 从来没有打算真正使用它，因此风格属性的混乱。  
<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
    <div class="container" style="padding-top:10px;margin-top:10px;">
        <div class="row text-center" style="margin-left:auto;margin-right:auto;">
            <div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
                <button id="reload" onclick="return returnGame();clearDescr();">
                    <div class="notspinning" id="theSpinner"></div>
                </button>
                <span id="findMe">
                    <a href="" id="steamLink" style="color:#333" target="_blank">
                        <h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
                    </a>
                </span>
                <p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
            </div>
        </div>
    </div>
</section>
 
 我们非常感谢任何正确方向的指导。 

I can't make particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen. The codepen has no background, therefor the particles are not visible. 
The code below is what I'm trying to set as background for <section id="services">.  
<!-- particles.js container --> 
<div id="particles-js"></div> 
<!-- stats - count particles --> 
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
 
The problem is that it covers everything inside <section> as well, not sure why.  
The code you're about to see is nothing but a butchered ole' bootstrap template. Never intended to make any real use of it in the first place, hence the confusing amount of style attributes. 
<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
    <div class="container" style="padding-top:10px;margin-top:10px;">
        <div class="row text-center" style="margin-left:auto;margin-right:auto;">
            <div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
                <button id="reload" onclick="return returnGame();clearDescr();">
                    <div class="notspinning" id="theSpinner"></div>
                </button>
                <span id="findMe">
                    <a href="" id="steamLink" style="color:#333" target="_blank">
                        <h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
                    </a>
                </span>
                <p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
            </div>
        </div>
    </div>
</section>
 
Any sort of guidance just in the right direction would be much appreciated.

原文：https://stackoverflow.com/questions/37232235

更新时间：2022-07-13 21:07

最满意答案

 {此处不需要：  
return {item.round ?
 
 如果你使用它意味着你要返回一个对象。  
 另一个问题是单独return意味着return; （ 自动分号插入 ）所以要么将条件放在同一行或使用() 。  
 写这样：  
render() {
    let a, b;
    var interviewProcessMapped = interviewProcess.map((item, index) => {
        a = item.round ?
                <div className="row title">
                    ....
                </div>
            : null;

        b =  (item.durationHours > 0 || item.durationMinutes > 0) ?
                  <div className="row">
                      ....
                  </div>
              : null;

        if(!a || !b)
            return a || b;
        return [a, b];
    });

    return (....)
}

{ not required here:  
return {item.round ?
 
If you use it that means you are returning an object.  
Another issue is alone return means return; (automatic semicolon insertion) so either put the condition in same line or use (). 
Write it like this: 
render() {
    let a, b;
    var interviewProcessMapped = interviewProcess.map((item, index) => {
        a = item.round ?
                <div className="row title">
                    ....
                </div>
            : null;

        b =  (item.durationHours > 0 || item.durationMinutes > 0) ?
                  <div className="row">
                      ....
                  </div>
              : null;

        if(!a || !b)
            return a || b;
        return [a, b];
    });

    return (....)
}

在正确的图层上获取particles.js？(Get particles.js on the correct layer?)

最满意答案

相关问答

React三元运算符用于遍历结果数组（否则未定义），是否有不同的首选方法？(React ternary operator used to iterate through a results array (otherwise undefined), is there a different, preferred approach?)[2022-03-05]

三元运算符（内联如果没有其他）(Ternary Operator (Inline If without Else))[2021-12-12]

三元运算符返回`True`而不是给定的值(Ternary operator return `True` instead the given value)[2023-01-15]

使用array.map返回反应三元运算符(React ternary operator with array.map return)[2021-10-24]

三元运算符的单一返回(single return of ternary operator)[2022-01-21]

三元运算符用法？(Ternary operator usages?)[2023-12-17]

使用三元运算符从三个变量返回最低值(Using the ternary operator to return lowest value from three variables)[2023-04-16]

三元运算符不工作？(Ternary operator not working? [duplicate])[2022-05-17]

为什么回报会跳过三元运算符产生的价值？(Why is return skipping the value produced in my ternary operator?)[2021-11-21]

java三元运算符返回函数结果(java ternary operator return function result)[2022-10-02]

相关文章

最新问答