I HTML/CSS kan brukeren legge til forskjellige elementer, og å legge inn bilder er en av dem. De kan også bruke forskjellige egenskaper til CSS for å gjøre websider mer attraktive, som roterende bakgrunnsbilder, bruke grenser, sette opaciteten til siden og mange flere. CSS gir også en "forvandle”Eiendom som brukes til å anvende den flerdimensjonale transformasjonen til et element.

Denne opplæringen vil illustrere:

• Hvordan legge til bilde i en beholder?
• Hvordan rotere bakgrunnsbildet i beholderen?

Hvordan legge til bilde i en beholder?

For å legge til et bilde i en beholder, gå gjennom de listede trinnene.

Trinn 1: Sett inn overskrift

Først må du legge til en overskrift ved hjelp av "

”Tag på HTML -siden. Sett deretter inn "tilpasse”Attributtverdi for å sette innretningen av overskriften i sentrum.

Trinn 2: Lag en div beholder

Neste, lage en “”Container og tildeler klassen“ Image Container ”og“ Align ”-attributter.

Trinn 3: Legg til bilde i en DIV -beholder

Sett deretter inn en "”Tag sammen med følgende attributter:

• “src”Attributt spesifiserer nettadressen til mediefilen.
• “alt”Brukes for å definere teksten for et spesifisert område hvis bildet ikke vises.
• “bredde”Tildeler bredden på bildet.
• “høyde”Attributt definerer høyden på bildet.
• “stil”Brukes til å spesifisere CSS -styling, inkludert grense og farge for elementer:

HTML -bilde

Produksjon

Hvordan rotere bakgrunnsbildet i beholderen?

Prøv instruksjonene gitt nedenfor for å rotere bildet i beholderen.

Trinn 1: Tilgangsbeholder

I CSS, først, få tilgang til “Bilde-Container”Klasse ved hjelp av en prikkvelger.

Trinn 2: Drei bildet “30” grader

Etter tilgang til “”Container, bruk følgende CSS -egenskaper:

.Bilde-Container
Transform: roter (30deg);
Bredde: 30%;
Høyde: 30%;
Bakgrunnsstørrelse: Deksel;
Margin: 30px;

Her:

• “forvandle”Eiendom brukes til å rotere beholderen. For eksempel CSS -funksjonen "roter (30deg)”Angir en transformasjon som roterer elementet mot et fast punkt på 2D -planet.
• “høyde”Eiendom tildeler høyden til et element.
• “bakgrunnsstørrelse”Tildeler størrelsen på elementbakgrunnen.
• “margin”Eiendom setter det tomme rommet for et element på utsiden av det definerte elementet.

Det kan observeres at bildet roteres til 30 grader av DIV -beholderen:

Trinn 4: Roter bildet “60” grader

For å rotere bildet til 60 grader, sett verdien av “rotere()”Funksjon som“60 grader”:

Transform: roter (60deg);

Produksjon

Dette innlegget har uttalt prosedyren for å rotere bakgrunnsbildet i beholderen.

Konklusjon

For å rotere bildet i beholderen, lag først en "”Og legg til bildet ved å bruke“" stikkord. Få tilgang til klassen for å bruke “forvandle”Eiendom for å rotere bildet med den spesifiserte verdien. Brukere kan bruke andre CSS -egenskaper for å style elementet, for eksempel "høyde”,“bakgrunnsstørrelse”, Og“margin”. Dette innlegget har vist metoden for å rotere bildet i en beholder.