我試圖解決一個CSS轉換的棘手問題。任何人？

我嘗試添加轉換：背景1s;但菜單背景圖像由於某種原因不會轉換。我在那裏做錯了什麼？我試圖解決一個CSS轉換的棘手問題。任何人？

#menu{ 
    padding-top:18px; 
    transition:background 1s; 
    -moz-transition:background 1s; 
} 
#menu > li{ 
    float:left; 
    padding-right:5px 
} 
#menu .last{ 
    padding-right:0; 
} 
#menu > li > a{ 
    width:188px; 
    display:block; 
    font-size:17px; 
    color:#000; 
    background:#fff; 
    text-transform:uppercase; 
    font-weight:400; 
    background: url('../images/IMAGE_A.jpg');; 
    height:70px; 
    line-height:64px; 
    border-top:1px solid #555; 
    text-align:center; 
    border-radius:4px 4px 0 0; 
    -moz-border-radius:4px 4px 0 0; 
    -webkit-border-radius:4px 4px 0 0; 
} 
#menu > li > a:hover,#menu > .active > a{ 
    background:#fff; 
    background: url('../images/IMAGE_B.jpg');; 
    background-repeat:no-repeat; 
    border-color:#7DB112; 
} 
#menu > li > a span{ 
    display:block; 
    position:relative; 
    color:#000; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:17px 
}

來源

2012-07-28 Demorus

就在最近，我試着用CSS不透明，但沒有運氣。 – Demorus 2012-07-28 22:36:20

製作一個精靈圖像（通過結合image_a和image_b）並與圖像位置一起玩。喜歡的東西：

#menu{ 
    padding-top:18px; 
} 
#menu > li{ 
    float:left; 
    padding-right:5px 
} 
#menu .last{ 
    padding-right:0; 
} 
#menu > li > a{ 
    transition:background-position 1s; 
    -moz-transition:background-position 1s; 
    width:188px; 
    display:block; 
    font-size:17px; 
    color:#000; 
    text-transform:uppercase; 
    font-weight:400; 
    background: url('../images/Sprite.jpg');; 
    background-position: -200px 0px; 
    height:70px; 
    line-height:64px; 
    border-top:1px solid #555; 
    text-align:center; 
    border-radius:4px 4px 0 0; 
    -moz-border-radius:4px 4px 0 0; 
    -webkit-border-radius:4px 4px 0 0; 
} 
#menu > li > a:hover,#menu > .active > a{ 
    background:#fff; 
    background-position: -600px 0px; 
    background-repeat:no-repeat; 
    border-color:#7DB112; 
} 
#menu > li > a span{ 
    display:block; 
    position:relative; 
    color:#000; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:17px 
}

此外，還要確保你有過渡性質與背景圖像相同的選擇設置。

希望它有幫助。

來源

2012-07-28 23:00:57

背景還不支持過渡。圖像轉換計劃用於CSS4。現在，您只能轉換所有謹慎的子屬性，如背景顏色，背景大小，背景位置。

來源

2012-07-28 22:45:27

我試圖解決一個CSS轉換的棘手問題。任何人？

回答

相關問題