CSS精灵中的“ background-position”使用负值
[英]`background-position` in CSS sprites using negative values
问题描述
My question is about negative values with the background-position property. 
我的问题是关于带有background-position属性的负值。
I am reading HTML and CSS by Jon Duckett, and I have the following sprite where the height of each buttons is 40px. 我正在阅读Jon Duckett的HTML和CSS，下面是一个精灵，其中每个按钮的高度为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 . 现在，在示例代码中，要选择取景选项， -175px 0px属性background-image赋予值-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 . 但是，我认为当通过如下所示的CSS坐标系统查看图像时，我认为应该是正确的，它应该是175px 0px ，然后下降40px， 175px 40px 。
Why is going left and down given negative values in this example? 在此示例中，为什么向左和向下给出负值？
1 个解决方案
解决方案1
2 已采纳 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. 根据对css sprite的回答（ 背景背景位置不清楚） ，要在x = 50和y = 20位置显示图像，请将Sprite -50移至坐标系的左侧和-20的顶部。
-50, -20
|-----------------------------------------------|
| |
| 0,0 |
| |-- |
| | |
| |
| |
| |
|-----------------------------------------------|
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.