CSS background-position begin en eind
Hoi,
Ik heb een sprite gemaakt.
Hierin zit een plaatje van 1 pixel breed.
Hiernaast zit een groot stuk transparant.
Nu wil ik alleen dit stukje laten repeaten (repeat-x)
Hier wat gegevens van het kleine plaatje in de sprite:
Start-x: 0px
Start-y: 186px
Eind-x: 1px
Eind-y: 386px
Alleen nu krijg ik het wel voor elkaar om op te geven waar hij moet beginnen.
Met background-position: 0px -186px;
Maar ik krijg het niet voor elkaar om hem maar 1 px breed te maken en dan ook nog eens repeat-x op te gooien.
Kan iemand me hiermee helpen, en is dit eigenlijk wel mogelijk?
Ik heb een sprite gemaakt.
Hierin zit een plaatje van 1 pixel breed.
Hiernaast zit een groot stuk transparant.
Nu wil ik alleen dit stukje laten repeaten (repeat-x)
Hier wat gegevens van het kleine plaatje in de sprite:
Start-x: 0px
Start-y: 186px
Eind-x: 1px
Eind-y: 386px
Alleen nu krijg ik het wel voor elkaar om op te geven waar hij moet beginnen.
Met background-position: 0px -186px;
Maar ik krijg het niet voor elkaar om hem maar 1 px breed te maken en dan ook nog eens repeat-x op te gooien.
Kan iemand me hiermee helpen, en is dit eigenlijk wel mogelijk?
Gewijzigd op 18/07/2013 11:13:16 door Tom aan t Goor
Transparante pixels zijn natuurlijk ook pixels en background repeat zal het gehele plaatje herhalen..
dus ik ben bang dat dat net iets veel gevraagd is.
dus ik ben bang dat dat net iets veel gevraagd is.
Hmm, weet je toevallig een andere oplossing?
Of moet ik die afbeeldingen dan niet in een sprite opslaan?
Of moet ik die afbeeldingen dan niet in een sprite opslaan?
waarom verander je de 1 pixel gedeelte niet in een net zo groot effen vlak als de afbeelding. volgens mij zal de grootte van het bestand daardoor niet drastisch wijzigen, zeker niet bij een jpg.
Een achtergrond-afbeelding waarvan je maar 1 pixel gebruikt ... zou je niet gewoon de background-color nemen van die ene pixel?
Of mis ik iets?
Of mis ik iets?
ja.. zoiets dan:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
div {
background-color:#F00;
background-image:url(test.jpg);
}
div:hover {
background-image:none;
}
background-color:#F00;
background-image:url(test.jpg);
}
div:hover {
background-image:none;
}
Gewijzigd op 18/07/2013 14:41:53 door Frank Nietbelangrijk