Te veranderen de achtergrondafbeelding voor HTML5 en CSS3-programmering wijzigen - dummies

U kunt de img-tag gebruiken om een ​​afbeelding toe te voegen aan uw HTML5-pagina, maar soms wilt u afbeeldingen gebruiken als achtergrond voor een specifiek element of voor de hele pagina. U kunt de CSS-achtergrondafbeelding met achtergrond gebruiken om een ​​achtergrondafbeelding toe te passen op een pagina of elementen op een pagina.

Achtergrondafbeeldingen zijn gemakkelijk toe te passen. De code voor achtergrondafbeelding. html laat zien hoe:

backgroundImage. html body {background-image: url ("ropeBG. jpg");} h1 {background-image: url ("ropeBGLight. jpg");} p {background-color: white; achtergrondkleur: rgba (255, 255, 255,. 85);}

Achtergrondafbeeldingen gebruiken
De kop gebruikt een lichtere versie van de achtergrond en de alinea gebruikt een effen achtergrondkleur met lichte transparantie.
De kop gebruikt een lichtere versie van de achtergrond en de alinea gebruikt een effen achtergrondkleur met lichte transparantie.

De achtergrondafbeelding aan een element koppelen via CSS is niet moeilijk. Dit zijn de algemene stappen:

1. Zoek of maak een geschikte afbeelding en plaats deze in dezelfde map als de pagina, zodat u deze eenvoudig kunt vinden.

2. Voeg de stijl van de achtergrondafbeeldingsstijl toe aan de pagina waarop u de afbeelding wilt toepassen.

   Gebruik het element als u de afbeelding op de volledige pagina wilt toepassen.

3. Vertel CSS waar achtergrondafbeelding is door een URL-ID toe te voegen.

   Gebruik de URL van het trefwoord () om aan te geven dat het volgende een adres is.

4. Voer het adres van de afbeelding in.

   Het is het gemakkelijkst als de afbeelding zich in dezelfde map als de pagina bevindt. Als dat het geval is, kunt u eenvoudig de naam van de afbeelding typen. Zorg ervoor dat u de URL omgeeft met aanhalingstekens.

5. Test uw achtergrondafbeelding door de webpagina in uw browser te bekijken.

   Er kan veel misgaan met achtergrondafbeeldingen. De afbeelding staat mogelijk niet in de juiste map, u hebt mogelijk de naam verkeerd gespeld of misschien bent u de bit vergeten.

Een achtergrondcontrole verkrijgen

Het is vrij eenvoudig om achtergronden toe te voegen, maar achtergrondafbeeldingen zijn niet perfect. Hier is een pagina met een mooie achtergrond. Helaas is de tekst moeilijk te lezen.

Achtergrondafbeeldingen kunnen veel zing toevoegen aan uw pagina's, maar ze kunnen enkele problemen introduceren, zoals

• Achtergrondafbeeldingen kunnen toevoegen aan de bestandsgrootte. Afbeeldingen zijn erg groot, dus een grote achtergrondafbeelding kan uw pagina veel groter en moeilijker te downloaden maken.

• Sommige afbeeldingen kunnen uw pagina moeilijker leesbaar maken. Een afbeelding op de achtergrond kan de tekst beïnvloeden, waardoor de pagina veel moeilijker te lezen is.

• Goede afbeeldingen vormen geen goede achtergrond. Een goede foto trekt de aandacht en vestigt de aandacht erop. De taak van een achtergrondafbeelding is om naar de achtergrond te verdwijnen. Als u wilt dat mensen naar een afbeelding kijken, sluit u deze in. Achtergrondafbeeldingen mogen niet op de voorgrond springen.

• Achtergronden moeten een laag contrast hebben. Als uw achtergrondafbeelding donker is, kunt u lichte tekst zichtbaar maken. Als de achtergrondafbeelding licht is, wordt donkere tekst weergegeven. Als je afbeelding gebieden van licht en donker heeft (zoals bijna alle goede afbeeldingen), is het onmogelijk om een ​​tekstkleur te vinden die er goed uitziet.