CSS Sprites - 不僅適用於背景圖片？

對於「前景」圖像是否可以使用CSS精靈 - 即用戶應該點擊並與之交互甚至打印的圖像？CSS Sprites - 不僅適用於背景圖片？

而不是使用CSS background-image財產。你會用什麼？

來源

2010-03-11 Summer

您可以使用標準<img />標籤，並將其放置在高度/寬度有限的容器（如<div />）中。然後使用相對定位或負邊距來控制圖像的位置。

來源

2010-03-11 19:37:30

天才，謝謝！ – Summer 2010-03-11 19:42:11

這是矯枉過正的IMO，你可以設置輸入來顯示塊，並將div/wrapper全部從等式中移除，這是一種更簡單的方法。 – 2010-03-11 19:42:25

@Nick這沒有任何意義。如何在不使用容器的情況下應用精靈？ – 2010-03-11 19:45:47

-1

你可以這樣做，但你必須使用背景圖片爲精靈，你必須要能夠設置位置。這可以用於鏈接或任何你想要的。看看谷歌精靈，他們用它有按鈕在iGoogle上：http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif

來源

2010-03-11 19:39:12

-1您可以使用CSS中的'position'結合'top，left，right，bottom'來控制任何元素的位置。或者，您可以使用負邊距。 – 2010-03-11 19:40:22

我從來沒有說過你可以控制任何元素的位置。但是，您可以使其與任何元素上的背景圖像一起工作。 – 2010-03-11 19:44:37

當然，你可以，但他們特別要求如何做*沒有*背景圖像！ – 2010-03-11 19:48:10

你可以用這樣少的CSS做到這一點：

.myClass { background: url(../Images/Sprite.png) no-repeat; 
      height: 20px; 
      width: 40px; 
      background-position: -40px 0; 
      display: block; } 
.myClass:hover { background-position: -40px -20px; }

不管有類class="myClass"將剛纔的形象吧，沒什麼其他。這可以是一個<a>的<input>還是正常<div>，任何你想要的。

這是一個背景圖片...但它是你在看，沒有什麼是在背景前的元素。僅僅因爲你使用background-image作爲屬性並不意味着它不是前景元素......就像你點擊一個按鈕。你可以這樣做：

<input type="button" class="myClass" />

來源

2010-03-11 19:58:25

這是基於背景圖像的解決方案，無論您如何旋轉此圖像。這個問題明確要求別的東西。我有點理解爲什麼 - 作爲文檔內容的一部分的圖像和屬於其佈局和風格的圖像之間存在明顯的*基本*區別。 – amn 2017-05-05 17:40:35

背景圖片無法處理的一個主要要求是ARIA。 ARIA的所有要求都將拒絕使用背景圖像進行有意義的導航和其他「信息性」用途，屏幕閱讀器必須代表殘疾用戶解釋這些用途。在當前規範的開發環境中，能夠替換img標籤的背景圖像css語句和必要的某些ARIA標籤是一個關鍵特性。

答案原來的問題是是！可以使用在css背景語句中顯示的圖像。但是，您必須在圖像編輯器中打開精靈圖像，並選擇代表所需精靈的部分並將其另存爲獨立圖像並將其引用到img標記中。

的挑戰是，通常情況下，這些情況在預建控件庫出現。查找和更改庫中用於選擇和顯示背景圖像的代碼有點困難，因爲更改代碼非常困難！

來源

2017-05-05 17:33:28

CSS Sprites - 不僅適用於背景圖片？

回答

相關問題