前提
[こちらのサイト](https://web-dev.tech/front-end/javascript/twinkle-stars-effect/
を使用して背景に星を設置しました。
こちらのサイトのDEMOでは分かりづらいのですが、星部分を黄色に変更し、尚且つ星を大きくすると他の要素に被って一番前に星が表示されているようになりました。
変えた箇所は星の数、色、大きさのみです。
実現したいこと
<div class="stars"> <div class="information"> <h1>title</h1> <img src="/test.jpeg"> <div class="tab"> タブの中身 </div> </div> </div>とした場合、h1とimg、tabの下に表示されるようにしたいです。
発生している問題・エラーメッセージ
分かりづらくてすみません、このような状態で上に被さります。
該当のソースコード
html
1<div class="stars"> 2 <h1>title</h1> 3 <img src="/test.jpeg"> 4 <div class="tab"> 5 タブの中身 6 </div> 7</div>
css
1 2.stars { 3 position: relative; 4 background-image: linear-gradient(0deg, #000, #000, #000); 5 overflow: hidden; 6} 7 8 9.star { 10 position: absolute; 11 display: block; 12 background-color: #ffe600; 13 border-radius: 50%; 14 box-shadow: 0 0 4px 2px rgba(#fff, 0.2); 15 opacity: 0; 16 animation: twinkle 5s infinite; 17} 18 19@keyframes twinkle { 20 0% { 21 opacity: 0; 22 } 23 24 50% { 25 transform: scale(1.1); 26 opacity: 1; 27 } 28 29 100% { 30 opacity: 0; 31 transform: scale(1); 32 } 33}
javascript
1window.addEventListener("DOMContentLoaded", () => { 2 const stars = document.querySelector(".stars"); 3 4 const createStar = () => { 5 const starEl = document.createElement("span"); 6 starEl.className = "star"; 7 const minSize = 3; 8 const maxSize = 7; 9 const size = Math.random() * (maxSize - minSize) + minSize; 10 starEl.style.width = `${size}px`; 11 starEl.style.height = `${size}px`; 12 starEl.style.left = `${Math.random() * 100}%`; 13 starEl.style.top = `${Math.random() * 100}%`; 14 starEl.style.animationDelay = `${Math.random() * 10}s`; 15 stars.appendChild(starEl); 16 }; 17 18 for (let i = 0; i <= 200; i++) { 19 createStar(); 20 } 21});
試したこと
あらゆるところにpositionとz-indexを入れてみて様子を見ましたがダメでした。
.informationにbackgroundを設置しても、星だけが突き抜けて一番上に表示されます。
お力添えいただけますと幸いです。
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/11/15 04:08