Een Afbeelding Invoegen In Een Afbeelding Op De Website

Inhoudsopgave:

Een Afbeelding Invoegen In Een Afbeelding Op De Website
Een Afbeelding Invoegen In Een Afbeelding Op De Website

Video: Een Afbeelding Invoegen In Een Afbeelding Op De Website

Video: Een Afbeelding Invoegen In Een Afbeelding Op De Website
Video: Mi-Soft.nl - html - Een afbeelding toevoegen aan uw website 2024, April
Anonim

De mogelijkheden van de opmaaktaal - HTML - en trapsgewijze stylesheets - CSS - stellen u in staat om op vele manieren de ene afbeelding in de andere te plaatsen. Dit vereist natuurlijk enige vaardigheden in de lay-out van webpagina's en u moet een specifieke methode kiezen op basis van de bestaande code. In sommige gevallen kunt u het echter doen zonder de broncode te bewerken.

Een afbeelding invoegen in een afbeelding op de website
Een afbeelding invoegen in een afbeelding op de website

instructies:

Stap 1

Er is een manier om de ene afbeelding in de andere te plaatsen zonder wijzigingen in de pagina's van de site. Om dit te doen, volstaat het om de achtergrondafbeelding die op de server is opgeslagen te bewerken - gebruik een grafische editor om de voorgrondafbeelding erop te plaatsen. Als deze methode voor u werkt, begin dan met het definiëren van de opslaglocatie en naam van het achtergrondafbeeldingsbestand. Dit kan door het te zoeken in de broncode van de pagina of door het in een apart tabblad te openen en het volledige pad in de adresbalk van de browser te bekijken.

Stap 2

Gebruik de bestandsbeheerder van het inhoudbeheersysteem of de FTP-client, download het vereiste bestand naar uw computer en open het in een grafische editor, bijvoorbeeld in de Paint-toepassing die met Windows is geïnstalleerd.

Stap 3

Plaats de voorgrondafbeelding over de achtergrond - hiervoor moet u in Paint het item "Invoegen uit" selecteren in de vervolgkeuzelijst "Invoegen" op het tabblad "Start" en het vereiste bestand zoeken in het dialoogvenster dat wordt geopend. Pas vervolgens de positie van de ingevoegde afbeelding op de bestaande achtergrond aan (versleep deze met de muis) en sla het resultaat op (Ctrl + S).

Stap 4

Laad de bewerkte foto terug en overschrijf de oude. Hiermee is de procedure voltooid.

Stap 5

De beschreven methode is onhandig in het geval dat de ingevoegde afbeeldingen van tijd tot tijd moeten worden gewijzigd. Gebruik dan de mogelijkheden van de HTML-taal - maak bijvoorbeeld de achtergrondafbeelding de achtergrond van het pagina-element waarin de voorgrondafbeelding wordt geplaatst. Zo'n containerelement kan bijvoorbeeld een laag (div) zijn. Om van een groot aantal afbeeldingen de achtergrond te maken, moet u de stijlbeschrijving gebruiken - het stijlkenmerk van de div-tag. Een lege container in HTML-code kan er als volgt uitzien:

Geef tussen haakjes het adres en de naam van het achtergrondafbeeldingsbestand op uw site aan.

Stap 6

Maak een tag voor voorgrondafbeeldingen (img), waarbij u hetzelfde stijlkenmerk gebruikt om de hoeveelheid opvulling vanaf de randen van de achtergrondcontainer in te stellen. Bijvoorbeeld:

Hier bepalen de breedte- en hoogtekenmerken de afmetingen van de afbeelding, en de vier cijfers na de opvulling geven de opvulling in pixels vanaf de randen van de container aan, beginnend bovenaan (50) en verder met de klok mee (60 - rechts, 70 - onder, 80 - links).

Stap 7

Plaats de img-tag in een container:

Stap 8

Voeg de gemaakte regels toe aan de broncode van de pagina en pas vervolgens, door de inspringingen te wijzigen, de positie van de ingevoegde afbeelding aan tegen de achtergrond van de achtergrondafbeelding.

Aanbevolen: