11 svar · 1 174 visningar · startad av noshornin
Jag vill göra så att alla länkar av en viss sort ska få en bild framför och bakom sig. alltså om jag skriver:
<a class="alink" href="#">hej</a>
så ska det se ut så här: en bild - hej - en bild. Går det att fixa det i css?
Prova med:
.alink:before {
content: url(dinbild.png);
}
och/eller med :after
Med speciella länkar t.ex till video
a[href$='.mov']:after {
content: url(dinbild.png);
}
Det är css3 och jag har inte testat det i alla webläsare, men... du kan ju prova :)
Eller om du vill ha stöd för de flesta webbläsare idag så kom frågan upp igår: http://www.webforum.nu/showthread.php?t=179447
Jag ändrade voigtanns kod så att det gick med två bilder:
.aLink {
background-image: url(bilder/pil.gif), url(bilder/pil2.gif);
background-repeat: no-repeat;
background-position: 0% 50%, 100% 50%;
display: inline-block;
padding-left: 16px;
padding-right: 16px;
}
eller jag såg nu att min kod inte funkade i ie!
verkar som om man inte kan ha två bakgrundsbilder i samma element i css 2. IE har inte uppgraderat till css 3. Hur ska jag göra då?
nej, det har dom inte stöd till, en bakgrundsbild per element
hur ska jag göra dåda?
hur ska jag göra dåda?
nej, det har dom inte stöd till, en bakgrundsbild per element
Du få ha två element med en varsin bakgrund, varför skall du ha det? Din fråga ha "En bild" inte flera.
Jag skrev väll frågan fel. Jag vill ha en bild både framför och efter länken. Men hur ska jag ha två element på ett snyggt sätt? Så här ser det ut nu:
<p><a class="aLink" href="#">...</a></p>
.aLink {
background-image: url(bilder/pil.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
display: inline-block;
padding-left: 16px;
padding-right: 16px;
}
Hur ska jag göra för att få en bild efter länken också?
hade hellre kört span än en paragraf:
http://voigt.se/sandbox/wf/link-css/
Se kod igen, är mer eller mindre exakt samma sak som tidigare.
danke!
Tekniken används rätt ofta för att få till runda hörn, mycket smidigt tills CSS3 blir standard
