`background-position` in CSS sprites using negative values
Question
My question is about negative values with the background-position property.
I am reading HTML and CSS by Jon Duckett, and I have the following sprite where the height of each buttons is 40px.
I also produced some following code from the book to activate these sprites when the user hovers and clicks over these buttons.
a.button { height: 36px; background-image: url("https://image.ibb.co/jnHrwk/button_sprite.jpg"); text-indent: -9999px; display: inline-block; } a#add-to-basket { width: 174px; background-position: 0px 0px; } a#framing-options { width: 210px; background-position: -175px 0px; } a#add-to-basket:hover { background-position: 0px -40px; } a#framing-options:hover { background-position: -175px -40px; } a#add-to-basket:active { background-position: 0px -80px; } a#framing-options:active { background-position: -175px -80px; }
<!DOCTYPE html> <html> <head> <title>Image Rollovers and Sprites</title> </head> <body> <a class="button" id="add-to-basket">Add to Basket</a> <a class="button" id="framing-options">Framing Options</a> </body> </html>
Now, in the example code, to choose framing options, the property background-image is given the value -175px 0px .
However, I thought that as the image is viewed via the co-ordinate system in CSS as shown below, I thought to go right, it would be 175px 0px and to go down by 40px, 175px 40px .
Why is going left and down given negative values in this example?
1 answers
solution1
2 ACCPTED 2017-08-29 16:10:34
You are actually moving/translating the sprite image in the coordinate system. As adapted from the answer to css sprite with negative background positions not clear , to display an image at position x=50 and y=20, move the sprite -50 to the left and -20 top in the coordinate system.
-50, -20
|-----------------------------------------------|
| |
| 0,0 |
| |-- |
| | |
| |
| |
| |
|-----------------------------------------------|
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.