CSS roterer bakgrunn
Eksempel # 01:
La oss komme i gang med dette HTML -skriptet med den enkle HTML Basic -taggen etterfulgt av Head -taggen som ble brukt til tittelen websiden via sin "tittel" -taggen. Liket av HTML -taggen har blitt dekket med forskjellige elementer som DIV og etiketter. Vi har to viktigste divelementer i dette HTML -skriptet. Innenfor begge de viktigste divelementene har vi også to barn "div" -merker som er spesifisert av to forskjellige klasser A, og B. Begge indre div -tagger bruker "etiketten" -elementet for å merke noen tekst i "div" og spesifisere div som normal eller rotert. Begge etikettene fikk grensen til 1px i stiplet stil mens den første divetiketten ville være blå og den andre ville være rød.
Når vi tar en titt på stilkoden, ble vi kjent med at begge de indre "div" -seksjonene er stylet separat ved å bruke sine respektive klasser: A og B. Begge DIV -elementene bruker samme bakgrunnsbilde fra systemet uten bakgrunnsrepetisjon, samme høyde og samme bredde: 120px og 30px. Mens den andre indre div vil også inneholde litt ekstra styling. Vi har brukt margin-toppegenskapen for å plassere denne div seksjon 100px langt fra toppen av HTML-siden og roterte den 90 grader til høyre ved å bruke transformasjonseiendommen.
Etter det roterte vi det 45 grader i motsatt retning der det startet. La oss lagre og kjøre dette skriptet nå.
Utgangen nedenfor viser en klar representasjon av ovennevnte HTML -kode. Den første div -delen inneholder et bilde med en etikett uten rotasjon, og ingen bakgrunn er gjentatt. Den andre DIV -delen har inneholdt et bilde og etiketten mens det først har blitt rotert 90 grader og deretter skjevt, oversettes og skalere det 45 grader mot sin opprinnelige posisjon.
Eksempel # 02:
Innenfor eksemplet ovenfor har vi rotert Div -seksjonene sammen med bakgrunnsbilder og etikettene de inneholder. Nå vil vi se på bruken av forskjellige egenskaper for å rotere bakgrunnsbildet med og uten teksten på HTML -siden. Liket på denne HTML -siden har blitt fylt med en overskrift av størrelse 1 og 4 forskjellige DIV -seksjoner med noen tekster. Alle disse 4 DIV -ene er spesifisert med forskjellige ID -er og klasser for å style dem separat: “RotateImageOnly” ID for First Div, “Rotate” -klassen for den andre div, “RotateTranslate” -klassen for den tredje div -delen, og “TransRaterotate” -klassen for fjerde div -delen. Innenfor Style Tag -elementet har vi brukt DIV -elementet i samme stil for alle de 4 elementene for noen egenskaper. Så vi har spesifisert posisjonen Absolute, 40px venstre polstring, 100px topp polstring, 100px bredde og høyde for alle, og bakgrunnsbildet vil være det samme for alle.
Mens vi har brukt IDen til den første div i denne stilkoden for å endre sin posisjon til slektning, endre bredde og høyde og venstre marginer. Bakgrunnsbildet for den første diven ville ikke bli overstyrt, og den eldre ville bli brukt. Bakgrunnsbildet for denne div -delen vil bli rotert 45 grader uten å oversette eller rotere teksten. Etter dette ville alle de tre div -seksjonene overstyre det nye bakgrunnsbildet.
Den andre div -delen er skissert 2px stiplet, rotert 45 grader vil teksten også bli oversatt med 200 piksler. Bakgrunnsbildet for tredje div.
Utgangen for dette HTML -skriptet har vist totalt 4 div med bakgrunnsbilder. Den første diven har brukt de forskjellige bakgrunnsbildene mens de andre overstyrer de nye bildene. Bakgrunnsbildet av den første DIV -delen er rotert til 45 grader mens teksten ikke er rotert.
Bakgrunnsbildet for den andre diven roterte til 45 grader mens teksten er oversatt til 200 piksler. Bakgrunnsbildet for den tredje div -delen er rotert til 90 grader sammen med teksten. Akkurat slik er bakgrunnsbildet for den fjerde delen blitt rotert til 180 grader, og teksten er oversatt til 180 piksler.
Eksempel # 03:
La oss starte med det siste eksemplet på denne artikkelen for å bruke noen egenskaper til CSS på bakgrunnsbilder av noen elementer på HTML -websiden. Vi tar en titt på kroppen på HTML -siden først. Innenfor kroppskoden for denne HTML -siden har vi brukt den eneste overskriften i størrelse 1. Det er ingenting igjen å gjøre på kroppskoden, så vi skal se på stilkoden til HTML -siden. Innenfor head -taggen til HTML -kode er det en tittelkode som har blitt brukt til å tittel på dette som "bakgrunnsbilde transformasjon".
Denne stilkoden er startet med bruk av kroppselementer. For styling har vi brukt eiendomsbakgrunnen for å legge til bildet som bakgrunn. Vi har satt bakgrunnen til ingen gjenganger slik at bakgrunnsbildet ikke kan gjentas på HTML-websiden. Dessuten brukes bakgrunnsinnstillingsegenskapen til å fikse bakgrunnsbildet, og tekstoverstrømningen har blitt brukt til å arve de overordnede innholdsegenskapene på hele siden. Et annet kroppselement har blitt brukt med etterattributtet for å lage et annet bakgrunnsbilde med absolutt posisjon: toppmarginer på 10%, venstre margin på 30%, bredde og høyde på 300 piksler sammen med det samme bakgrunnsbildet som inneholder opaciteten til 0.5.
Radius for grensen til dette bildet er satt til 50%. Dette betyr at dette bildet vil bli vist i en sirkel. Bakgrunnsbildet vil også roteres 45 grader og ingen bakgrunnsgjentay -egenskap er blitt brukt, slik at bildet kan gjentas mange ganger.
Utgangen har vist det første bakgrunnsbildet som vises ganske enkelt uten rotasjon, uten oversettelse, og uten å gjenta. Mens det andre bakgrunnsbildet er rotert 45 grader med 50% radius og bakgrunnsbildet gjentas mange ganger som vist på bildet nedenfor.
Konklusjon
Denne artikkelen utgjør bruk av forskjellige CSS -egenskaper for å rotere bakgrunnsbilder av hvilken som helst HTML -side til visse grader. HTML -eksempler er prøvd å bruke disse interessante egenskapene til CSS på en veldig enkel og unik måte. For disse eksemplene har vi benyttet oss Nødvendig utgang for å rotere bakgrunnen.