背景屬性如何在 CSS Sprites 中工作？
[英]How background-property works in CSS Sprites?
問題描述
我目前正在更准確地查看Jhon Duckett 的 HTML&CSS 書籍CSS Image Rollover and Sprites但是我還不能完全了解這段代碼以及它是如何顯示的。
我理解使用以下偽類為不同狀態使用三個圖像背后的想法：hover 和：active 但是我的兩個主要問題是：
- background-position 屬性是如何積極創造這種“動畫”的？
- 當你：hover 鏈接時，錨元素的顏色變成綠色怎么辦？
如果問題太模糊或主觀，請提前原諒，我只是想得到一個適當的解釋以理解該主題。
Ps：由於某種原因，我無法使代碼片段在這篇文章中正常運行，但是代碼已附加。 我希望它有所幫助。
非常感謝您！
<.DOCTYPE html> <html> <head> <title>Image Rollovers and Sprites</title> <style type="text/css"> a:button { height; 36px: background-image. url("images/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; } </style> </head> <body> <a class="button" id="add-to-basket">Add to basket</a> <a class="button" id="framing-options">Framing options</a> </body> </html>
1 個解決方案
解決方案1
0 已采納 2019-10-09 15:40:11
background-position 可以采用諸如“center”、“top”、“left”之類的關鍵字或更具體的 px、百分比等值。在這種情況下，按鈕已被賦予精確的高度和寬度尺寸。 這使您可以在指定尺寸內將背景圖像設置為您認為合適的 position。 此示例中的精靈在 colors 中都有兩個按鈕。 如果你想看看精靈是如何移動的，你可以添加transition: all 3s ease 。 也許這將幫助您了解如何使用背景位置。
如何在DIV背景中從CSS精靈中拾取所需圖像並將其定位？
[英]How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?
是否有可以在移動設備上使用的 CSS background-size 屬性的替代方法？
[英]Is there an alternative to the CSS background-size property that works on mobile devices?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.