Motif de fond en points de polka
index.html
et style.css
ont déjà été fournis dans la machine virtuelle (VM).
Pour créer un motif de fond en points de polka, vous pouvez suivre ces étapes :
- Définissez la propriété
background-color
sur noir.
- Utilisez la propriété
background-image
avec deux valeurs radial-gradient()
pour créer deux points.
- Spécifiez la taille du motif à l'aide de la propriété
background-size
. Utilisez background-position
pour placer correctement les deux dégradés.
- Définissez
background-repeat
sur repeat
.
- Notez que la hauteur (
height
) et la largeur (width
) fixes de l'élément sont uniquement à des fins de démonstration.
Voici un exemple de code HTML pour un élément div avec la classe polka-dot
:
<div class="polka-dot"></div>
Et voici le code CSS correspondant :
.polka-dot {
width: 240px;
height: 240px;
background-color: #000;
background-image:
radial-gradient(#fff 10%, transparent 11%),
radial-gradient(#fff 10%, transparent 11%);
background-size: 60px 60px;
background-position:
0 0,
30px 30px;
background-repeat: repeat;
}
Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.