Hvordan du slår et bilde i en CSS-kode

February 15

The World Wide Web Consortium har godkjent et sett av design standarder som regulerer hvordan websider blir presentert for nettbrukere. Disse reglene er kjent som Cascading Styles Sheets (CSS). Mange Webdesignere nå bruke CSS for å style og legge ut sine Hyper Text Markup Language (HTML) kodeelementer. Dette har imidlertid ikke alltid vært tilfelle. I de siste webdesignere brukte tabellbaserte HTML regler for å legge ut innholdet. Nå, for å dra nytte av CSS standarder, må Webdesignere trekke innhold som bilder fra tabell-basert layout og plasser innholdet ved hjelp av CSS-regler.

Bruksanvisning

1 Opprett en ny CSS-regel for bildets wrapper element. Dette er HTML div-elementet som inneholder bildet. Ved anvendelsen av denne opplæringen div gis identiteten til "imageDIVWrapper", men du kan kalle det noe annet hvis nødvendig.

imageDIVWrapper {}

2 Gi bildet ditt til div. Dette gjøres ved å sette bakgrunnsbilde egenskap av div. Du kan også skrive en background-repeat regel som gjentar bildet langs enten den horisontale eller vertikale aksen hvis ønskelig. I dette tilfellet background-repeat eiendommen er satt til "no-repeat".

imageDIVWrapper {

background-image: URL (yourImage.gif);

background-repeat: no-repeat; }

3 Etablere høyden og bredden av omslaget div. Dette eksemplet setter bredde og høyde egenskaper av div til 50 piksler bred og 100 piksler høy.

imageDIVWrapper {

background-image: URL (yourImage.gif);

bredde: 50 piksler;

height: 100px;}

4 Angi posisjonen og margin egenskaper. Stillingen eiendom forteller nettleseren hvor du vil plassere div. I dette tilfellet div er plassert ved hjelp av flyte eiendom og fløt til venstre. Marginen Eiendommen etablerer en margin mellom denne div og andre divs. Hvis bildet er en multippel-del-bilde som må plasseres i flukt med en annen del av bildet deretter margen bør settes til null piksler. I dette eksempel margen er plassert på fem piksler.

imageDIVWrapper {

background-image: URL (yourImage.gif);

background-repeat: no-repeat;

bredde: 50 piksler;

høyde: 50 piksler;

float: left;

margin: 5px;}

5 Lag div-elementet inne i HTML-koden. Plasser div inne i HTML-dokumentet der du vil at bildet skal vises.