CSS -knappbilde
Eksempel 01: Bruke CSS -stilkoden for å legge til et bilde i en knapp i en HTML -fil
I dette eksemplet vil vi legge til et bilde inne i en knapp ved hjelp av CSS -stilkoden i filoverskriften. Inne i stilmerket vil vi konstruere en klasse for knappen, som vil bli kalt senere i kroppen. Deretter vil vi lage et skript der vi vil legge til et bilde i en knapp ved hjelp av teknikken vi tidligere nevnte.
I forrige skript åpnet vi en stilkode i filoverskriften. I denne taggen åpner vi knappeklasseparametere der vi vil definere flere utforming av egenskaper for knappelementet. Først legger vi til bildet for knappens bakgrunn. Vi kan legge til bildet via "URL" eller "SRC". Så legger vi til bakgrunnsstørrelse som er oppgitt som et "omslag". Så definerer vi også bredden og høyden på knappen. Etter dette lukker vi stilmerket og flytter til kroppskoden. I denne taggen legger vi til en overskrift ved hjelp av H1 -taggen. Deretter kalles knappekoden. I denne taggen kaller vi stylingklassen som vi opprettet tidligere for å arve all styling som er definert i klassen. Deretter lukker vi alle de gjenværende taggene og lagrer filen i HTML -format.
Som vi kan se i forrige utgang, vises bildet som en knapp på nettleserens side sammen med overskriften. Dette rettferdiggjør at stylingklassen ble arvet med knappeknappen med hell.
Eksempel 02: Legge til et bilde i en knapp ved hjelp av en inline CSS -tilnærming
I dette tilfellet vil vi legge til et bilde i en knapp ved hjelp av den inline CSS -tilnærmingen. Vi vil legge til et bilde til et standardknappelement i hypertekstmarkeringsspråket ved å gi det et bildes URL i denne metoden. La oss nå ta en titt på manuset for denne teknikken.:
I skriptet gjenspeiles i bildet, kan vi se at filoverskriften er tom fordi vi vil bruke den inline CSS -tilnærmingen i dette eksemplet. Vi åpner knappelappen vår. I taggen nevner vi CSS som vi ønsker at knappen skal ha i stilegenskapen. Vi nevner all styling i denne eiendommen og skiller dem med semikoloner. Vi legger også til et bilde ved hjelp av bakgrunnsbildet nøkkelord og tildeler et bilde via URL. Da er knappetoden lukket sammen med kroppskoden. Etter dette åpner vi denne HTML -filen i nettleseren vår.
Den forrige output er et bevis på at den inline stil -tag -tilnærmingen har vært en suksess. Vi kan se at bildet legges til på knappen, og standardknappen blir nå omgjort til et bilde.
Eksempel 03: Bruke CSS -stilmerker for å legge til et bilde i en knapp når det henger over
Vi vil legge til et bilde i en knapp som bare vises når knappen blir svevet i dette eksemplet. Vi bruker stilkoden CSS for å gi en knapp med slik oppførsel i en HTML -fil. Vi vil lage en egen klasse for å skille denne stylingen for et spesifikt element i dette eksemplet. For å oppnå dette målet, bør vi skrive følgende skript:
I forrige skript åpnet vi hodemerket for HTML -filen. I denne taggen er stylingen av knappen definert ved å åpne en klasse for knappelementet. I denne klassen definerer vi bredden og høyden på knappen først. Deretter legger vi til en eiendom som gjør markøren til en peker, og vi gir teksten også en rimelig størrelse. Deretter legger vi til en arvelig metode som heter "Hover" til klassen. I denne funksjonen legger vi til et bilde til bakgrunnen via URL og tildeler en egenskap til bakgrunnsstørrelsen som kalles "dekselet".
Etter dette lukker vi alle stylingmerker og beveger oss mot kroppen av denne filen. I Body -taggen legger vi til en overskrift ved hjelp av H1 -taggen, og knappekoden åpnes etter overskriften. I knappekoden kaller vi klassen som vi opprettet i stilkoden til filens overskrift. Og så lukk knappen og kroppskoden. Etter dette åpner vi denne filen i nettleseren vår for å få følgende utdata:
Utgangen som vi ser i denne filen er resultatet etter at knappen er svevet på. Når vi svever over knappen, vises bildet som vi tildelte i stilkoden til filoverskriften.
Eksempel 04: CSS -stilkode Transformasjon av en standardknapp til et ikon for neste og forrige funksjon
I dette eksemplet vil vi transformere de to standardknappene til hypertekstmarkeringsspråket ved å bruke CSS -stilkoden. Vi vil forvandle de to knappene i dette eksemplet til neste og tidligere ikoner ved å legge til et bilde i stilkoden. Vi bør skrive følgende skript for å gjøre det:
I forrige skript legger vi til en stilmerke i filoverskriften. Deretter lager vi to klasser for de to knappene i stilkoden. I disse klassene legger vi til et bilde til begge knappene, ved å bruke bakgrunnsbildeegenskapen og URL -formatet for bildet. Etter å ha tilordnet begge klassene med egenskapene sine, lukker vi stilen og hodemerket og åpner kroppskoden for å lage innholdet for nettleserens side. Først gir vi grensen en overskrift ved hjelp av H1 -taggen, som er en overskriftsstørrelse definert i HTML. Deretter lager vi to knapper. I begge disse knappene tildeler vi den relative klassen som er definert i stilkoden. Etter dette lukker vi fanene og åpner denne filen i nettleseren vår etter å ha lagret den.
Den forrige utgangen er resultatet av skriptet vårt. Som vi kan se, er begge knappene justert, og bildene fra stilklassene settes riktig inn. Nå blir standardknappene forvandlet til neste og tidligere ikoner for en webside ved å bruke CSS.
Konklusjon
I denne artikkelen diskuterte vi flere eksempler på å legge bildene til en knapp ved hjelp av CSS. Vi brukte inline CSS og stilkoden CSS for å legge til bildene i en standardknapp i en HTML -fil. Vi implementerte flere effekter på en knapp for å legge til et bilde som sveveeffekten eller dekkstilbakgrunnen ved å bruke Notisblokkene ++ for å redigere HTML -filen. Vi brukte de forskjellige egenskapene i CSS -styling av knappelementet for å transformere dem til et attraktivt attributt på websiden vår.