Y軸上的CSS背景位置變化只有

我有一個由10（25）x 25像素圖標水平排列的CSS sprite圖像 - 因此產生250像素寬度的精靈圖像。

我使用這些25x25圖像作爲縮略圖。我希望在INITIAL視圖中對這些圖像具有30％的不透明度，並且當用戶將它們懸停在它們上面時，不透明度需要爲100％（1）。

所以我做的是創建一個第二行的圖像，其不透明度在30％ - 所以現在我有一個250像素x 50px的精靈圖像。最高25px，100％，最低25px，最高30％。

我設置的HTML如下：

<a href="largeimage1.jpg" class="thumb1"></a> 
<a href="largeimage2.jpg" class="thumb1"></a> 
<a href="largeimage2.jpg" class="thumb1"></a> 
etc...

和CSS：

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; } 
.thumb1 { background-position: 0 0; } 
.thumb2 { background-position: -25px 0; } 
.thumb3 { background-position: -50px 0; } 
a:hover { **background-position-y**: -25px; }

然而，這似乎並沒有遺憾的工作，因爲背景位置-Y不是在Firefox支持（或者不是一個標準，但是是特定於IE的）。

這個想法是，我們（僅）想要將精靈圖像向上（沿y軸）移動，並保持x軸原樣（或在前面的類中設置）。

如果沒有簡單的CSS解決方案 - 可以用JQUERY完成這種不透明效果嗎？所以大拇指會以30％的不透明度加載，並且在用戶懸停時會過渡到100％不透明度？

非常感謝，

來源

2009-05-03 Mo Boho

http://stackoverflow.com/問題/ 4900212 /只能改變背景圖像通過jquery包含類似的問題 – feeela 2011-12-09 15:18:22

你不需要第二個圖標集，也不需要使用JavaScript來達到預期的效果。

正如Lou指出的那樣，使用opacity可使您的圖標達到30％或完全可見。無需再與background-position混淆了。

只要繼續下去，並相應地定義你的樣式如下：

a { 
    opacity:0.3; /* for standard browsers */ 
    filter: alpha(opacity = 30); /* for IE */ 

    display: block; 
    float: left; 
    width: 25px; 
    height: 25px; 
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; 
} 

a:hover { 
    opacity:1.0 
    filter: alpha(opacity = 100); 
} 

.thumb1 { background-position: 0 0; } 
.thumb2 { background-position: -25px 0; } 
.thumb3 { background-position: -50px 0; }

如果你擔心你的CSS代碼驗證，以IE特定部位（這將不會驗證），並把它們通過conditional comments專門針對CSS文件。

希望有所幫助。

來源

2009-05-20 11:16:28 WrongAboutMostThings

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".

這是否有什麼影響？

您只有10個圖像，只需爲每個圖像定義一個css類。這樣你可以指定相對的x座標。

ps。我希望你沒有使用那個確切的CSS，將這種風格應用於：懸停將適用於頁面上的所有鏈接。你應該只將它應用於成像風格。

a { display: block; 
    float: left; 
    width: 25px; 
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat; 
    } 
.thumb1 { background-position: 0 0; } 
.thumb2 { background-position: -25px 0; } 
.thumb3 { background-position: -50px 0; } 
.thumb1:hover { background-position: 0 -25px; } 
.thumb2:hover { background-position: -25px -25px; } 
.thumb3:hover { background-position: -50px -25px; }

還有opacity..

來源

2009-05-03 20:58:48 Louis

不，不幸的是，不幸的是。我們完全失去了背景圖像。 – 2009-05-03 21:50:36

修改後，希望它有幫助 – Louis 2009-05-04 00:54:48

更新了示例代碼：似乎做你想做的事我認爲。 – Louis 2009-05-04 01:14:18

我相信婁的答案是你想要它做的事情 - 你只需要定義每個國家一類，並設置x和y座標。

如果你想要衰落的效果，那麼jQuery gives you a way to do it。這大概可以得到你想要的東西，如果是這樣的話：

$(".thumb").css("opacity", 0.33); 
$(".thumb").hover(
    function() { 
     $(this).fadeTo(300, 1.0); 
    }, 
    function() { 
     $(this).fadeTo(1, 0.33); 
    } 
);

編輯：基於更新過的反饋。現在設置了初始不透明度。

來源

2009-05-04 01:36:26

上例中的一些小的遺漏，錯別字和不必要的代碼。猜測你的代碼可能是這個樣子：

<style> 
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); } 
a.thumb1 { background-position: 0 0; } 
a.thumb2 { background-position: -25px 0; } 
a.thumb3 { background-position: -50px 0; } 
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; } 
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } 
</style> 

<a href="largeimage1.jpg" class="thumb1"></a> 
<a href="largeimage2.jpg" class="thumb2"></a> 
<a href="largeimage2.jpg" class="thumb3"></a>

來源

2009-06-19 18:45:05 Michiel

簡單的方法

{background-position:100% 4px;}

可以使用親子同像素替代背景位置，y屬性

來源

2010-12-03 11:32:12 iMezied

Y軸上的CSS背景位置變化只有

回答

相關問題