Hvordan bruke et bakgrunnsbilde som en liste Bullet i CSS

Med en enkel CSS-regel, kan du bruke en hvilken som helst bakgrunnsbilde du ønsker som en kule for en uordnet liste. Her er hvordan du gjør det.

Bruksanvisning

1 Hvordan bruke et bakgrunnsbilde som en liste Bullet i CSS

Bildet har en normal punktliste før noen CSS-regler blir brukt til det.

2 Du trenger ikke å endre noe om HTML som skapte listen. Du bare bruke CSS til å endre sitt utseende.

3 Forbered grafikken som du vil bruke som bakgrunnsbilde. I dette eksempelet brukte jeg en grafikk som er 15 piksler bred og 48 piksler i høyden. Bildet er vertikalt sentrert i midten av de 48 piksler. Det er viktig å sentrere grafikk og gjøre bildet høyere enn du forventer å trenge. Du vil se hvorfor i et øyeblikk.

4 Skriv CSS-reglene som vil legge grafikken på listen. Med velgeren være LI, må du sette list-style sidestykke. Som fjerner det normale kulen. Neste legge til en regel for LI bakgrunnen. Gi nettadressen til bildet, satt det ikke å gjenta, deretter plassere den på venstre horisontalt og midt vertikalt. Til slutt legger noen padding-venstre for å gjøre plass til grafikken til venstre for hvert listepunkt.

Her er CSS regel:

li {

list-style: none;
background: url(bullet.gif) no-repeat left center;
padding-left: 20px;

}

5 Hvordan bruke et bakgrunnsbilde som en liste Bullet i CSS


Det kan også ønske å manipulere plassering av hele listen i forhold til den venstre side av beholderen, eller i forhold til stillingen for hvert listeelement.

Her er en regel jeg brukte i dette eksempelet:

ul {

padding: 5px;

}

Bildet viser den ferdige listen.

6 Hvordan bruke et bakgrunnsbilde som en liste Bullet i CSS


Jeg lovet å forklare hvorfor grafikken bør være større i høyden enn du forventer å trenge. Mange brukere må øke tekststørrelsen på nettsidene for å lese den. Du vil at grafikken holder seg på plass selv når teksten er forstørret. Så lenge listeelementene ikke får så store at de krever to linjer for å vise, vil bakgrunnsbildet bo i posisjon. Se bildet for en visning av listen utvidet tre ganger.

Hint

  • Det er en metode for å bruke et grafisk kule i et listeelement som erstatter den vanlige kule med et bilde ved hjelp av list-stil. Ved hjelp av en liste-stil for å legge til grafikk laster bildet inn i HTML hvor det kan bli gitt alt-tekst. Siden kulen er bare dekorative, er det bedre å bruke dette eksemplet, setter det på siden som et bakgrunnsbilde, så det er ingen problem om hvorvidt eller ikke å gi bildet alt-tekst.