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
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
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
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.