HTML CSS Punkte auf Website?

Was ist der performanteste Weg, mit HTML CSS...

...solche Punkte auf der Website zu platzieren (rote Kreise)?

Answer 1

[MrAmazing2]

Der performanteste Weg wäre, wenn diese Punkte bereits im Hintergrundbild vorhanden wären.

Aber falls du, warum auch immer, die Punkte per HTML machen willst, wäre wohl folgendes der performanteste Weg:

Plaziere Div-Elemente mit width: 2px, height:2px und Hintergrundfarbe weiß auf deiner Seite. Am besten auch noch z-index -1, damit die Punkte im Hintergrund bleiben.

Das plazieren der Punkte kannst du natürlich manuell machen wie folgt

HTML:

<div class="star" style="top: 10px; left: 40px;"></div>
<div class="star" style="top: 98px; left: 14px;"></div>
<div class="star" style="top: 64px; left: 73px;"></div>
<div class="star" style="top: 10px; left: 80px;"></div>
<div class="star" style="top: 89px; left: 94px;"></div>

CSS:

body {
 background-color: black;
}

.star{
 z-index: -1;
 width: 2px;
 height: 2px;
 background-color: white;
 position: fixed;
}

Aber das lässt sich mit JS natürlich auch automatisieren:

for(let i = 0; i < 100; i++) {
  const div = document.createElement("div");
  div.classList.add("star");
  div.style.top = Math.random()*4000 + "px";
  div.style.left = Math.random()*4000 + "px";
  document.body.appendChild(div);
}

Fiddle: https://jsfiddle.net/4hqcfw3k/

Woher ich das weiß: eigene Erfahrung – Minecraft-Experte. Aktiver Spieler seit 2011.

Answer 2

[EinAlexander]

Was ist der performanteste Weg, mit HTML CSS .solche Punkte auf der Website zu platzieren

<style>
.dot div {position:absolute; font-size:3em}
.dot :nth-child(1) {top:100px; left:200px}
.dot :nth-child(2) {top:150px; left:400px}
.dot :nth-child(3) {top:200px; left:160px}
.dot :nth-child(4) {top:250px; left:100px}
</style>
<div class="dot">
<div>&middot;</div>
<div>&middot;</div>
<div>&middot;</div>
<div>&middot;</div>
</div>

Alex