Particles.js?

मैं एक पृष्ठभूमि के रूप में इस उदाहरण का उपयोग करने की कोशिश कर रहा हूँ, लेकिन मैं यह काम करने के लिए नहीं कर पा रहे।Particles.js?

http://vincentgarreau.com/particles.js/#nasa

आदेश में इस से बचने के लिए मैं कर रहा हूँ -1500px बस के शीर्ष पर अपने पाठ जगह के अंतर शीर्ष का उपयोग करने के लिए मजबूर किया और यह जवाबदेही के साथ प्रमुख संबंधी समस्याएं उत्पन्न।

क्या किसी के पास कोई विचार है कि मैं इसे पृष्ठभूमि के रूप में सख्ती से कैसे उपयोग कर सकता हूं?

प्लगइन के निर्माता अपनी वेबसाइट पर यहाँ यह किया गया है।

http://vincentgarreau.com/en

आप बता सकते हैं जब आप इसे का निरीक्षण किया, वहाँ कोई "कैनवास" शीर्ष पर मँडरा के रूप में वहाँ CodePen उदाहरण पर है क्योंकि।

स्रोत

2016-11-21 Milan Maru

यह 'z- सूचकांक के साथ एक' div' में है है: -10; ' –

आप के लिए लिंक साझा कर सकते हैं codepen? – Roberrrt

दुर्भाग्य से यह मेरे codepen के लिए लिंक का हिस्सा नहीं जाने देंगे। –

मैंने पहले इस समस्या का सामना किया और ऐसा करने से यह ठीक करने के बाद:

/* to show the canvas bounds and remove scrollbars caused by it, if applicable */ 
canvas { 
    display:block; 
    background: rgb(33,36,50); 
    position: fixed; 
    z-index: -1; 
}

तो अपनी सामग्री के लिए एक div/मुख्य तत्व बना सकते हैं और यह करने के लिए इस जोड़ें: आप

mainElementNameHere { 
    position: absolute; 
}

स्रोत

2016-11-21 15:01:12 Grey

भी इस

<body id="particles-js"> 
<div class="something"> 
    <h1> something here </h1> 
</div> 
</body>

सीएसएस में है जैसे कि यह लागू कर सकते हैं

.something { 
z-index:1; 
}

पृष्ठभूमि में रखे कण-जेएस के सभी तत्व। उपयोगी उम्मीद है।

स्रोत

2016-11-22 14:59:36

मैं सिर्फ अगले सीएसएस कोड के साथ ऐसा करने में कामयाब रहे, बस के रूप में निर्माता his nasa page में करता है:

body, 
html { 
    height: 100% 
} 

#particles-js canvas { 
    display: block; 
    vertical-align: bottom; 
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease; 
    transition: opacity .8s ease, transform 1.4s ease 
} 

#particles-js { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: -10; 
    top: 0; 
    left: 0 
}

तब मैं <div id="particles-js"></div> लिखा सिर्फ शरीर खुलने वाले टैग के बाद। ध्यान दें कि आप कैनवास वर्ग क्योंकि यह particles.js पुस्तकालय द्वारा उत्पन्न किया जा रहा है नहीं देख सकता।

Canvas creation code fragment

स्रोत

2017-04-17 08:45:57 Erwol

कोशिश तत्व है कि आप particles.js के सामने रखना चाहते हैं पर overflow: hidden; संपत्ति का उपयोग करने के लिए;

#main-section { 
    overflow: hidden; 
} 

#particles-js { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
    opacity: 0.48; 
}

स्रोत

2017-08-15 22:27:15

id="particles-js" में सिर्फ अपने सीएसएस करने के लिए इस कोड जोड़ें:

position: fixed !important; 
display: block;

आप पिछले शैलियों को ओवरराइड करने !important जोड़ सकते हैं।

स्रोत

2017-10-19 05:25:13

इस प्रयास करें:

#particle_background canvas{ 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
}

जहां आपके शरीर आईडी = "particle_background"

स्रोत

2018-01-01 00:15:46 kumail

उत्तर

संबंधित मुद्दे