CSS精靈中的“ background-position”使用負值
[英]`background-position` in CSS sprites using negative values
問題描述
我的問題是關於帶有background-position屬性的負值。
我正在閱讀Jon Duckett的HTML和CSS，下面是一個精靈，其中每個按鈕的高度為40px。
當用戶懸停並單擊這些按鈕時，我還從書中產生了以下一些代碼來激活這些精靈。
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>
現在，在示例代碼中，要選擇取景選項， -175px 0px屬性background-image賦予值-175px 0px 。
但是，我認為當通過如下所示的CSS坐標系統查看圖像時，我認為應該是正確的，它應該是175px 0px ，然后下降40px， 175px 40px 。
在此示例中，為什么向左和向下給出負值？
1 個解決方案
解決方案1
2 已采納 2017-08-29 16:10:34
您實際上是在坐標系中移動/平移子畫面圖像。 根據對css sprite的回答（ 背景背景位置不清楚） ，要在x = 50和y = 20位置顯示圖像，請將Sprite -50移至坐標系的左側和-20的頂部。
-50, -20
|-----------------------------------------------|
| |
| 0,0 |
| |-- |
| | |
| |
| |
| |
|-----------------------------------------------|
HTML + CSS懸停精靈，不同大小的圖標，一個背景位置CSS
[英]HTML+CSS Hover sprites, different size icons, one background-position CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.