I have this sprite:
Link http://gpanel.darrell.nl/images/derma.png
And in the right upper corner there are 4 button images. I like to use the buttons like that the corners stay intact but that the rest can be stretched. I searched the whole internet but couldn't find a thing. How can I make this possible with CSS?
The same for the windows frame upper left.
Unfortunately border-image doesn't work well with sprites, It can be done, but requires an extra element and some not-very-elegant tricks, here's a demo: http://jsfiddle.net/sandro_paganotti/H2xgQ/1/
.border{
border-right: 400px solid black;
border-bottom: 400px solid black;
border-image: url('http://gpanel.darrell.nl/images/derma.png') 3 388 388 3 fill stretch stretch;
height: 300px;
width: 200px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.