背景圖片精靈懸停不對齊

我想實現從這個CSS-技巧文章的背景圖像精靈懸停效果：http://css-tricks.com/fade-image-within-sprite/背景圖片精靈懸停不對齊

我的問題是圖像不有如下情況完全一致：

HTML：

<ul class="contact"> 
    <li class="phone"><a class="bg_hover" href="#">Call me</a> 

    </li> 
    <li class="twitter"><a class="bg_hover" href="#">Follow me on Twitter</a> 

    </li> 
    <li class="email"><a class="bg_hover" href="#">Email me</a> 

    </li> 
</ul>

CSS：

.bg_hover { 
    position: relative; 
} 
.bg_hover:after { 
    content:""; 
    background-image: inherit; 
    background-position: bottom left; 
    background-repeat: no-repeat; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    transition: 1s; 
} 
.bg_hover:hover:after { 
    opacity: 1; 
} 
.contact { 
    margin-left: 60px; 
} 
.contact li { 
    float:left; 
    margin: 30px 15px 0 0; 
    font-style: italic; 
} 
.contact li a { 
    padding: 3px 0 0 25px; 
    height: 18px; 
    background-repeat: no-repeat; 
    display: block; 
} 
.contact .phone a { 
    background-image: url(http://i.imgur.com/9d9hdiL.png); 
} 
.contact .email a { 
    background-image: url(http://i.imgur.com/9d9hdiL.png); 
} 
.contact .twitter a { 
    background-image: url(http://i.imgur.com/9d9hdiL.png); 
} 
li { 
    list-style: none; 
}

的jsfiddle：http://jsfiddle.net/47Lngd4t/2/

enter image description here

你能告訴我問題出在哪裏？

來源

2015-01-03 planktone

您的背景位置不太正確。您使用的圖像精靈是一個或兩個像素。更改background-position以下幾點：

.bg_hover:after { 
    background-position: 0 -21px; 
}

見演示此：http://jsfiddle.net/AndyMardell/47Lngd4t/3/

來源

2015-01-03 20:40:45

如果你說的是喜歡這裏http://take.ms/a6ar2效果根本例如10px添加line-height到.contact li a選擇

也有一些其他的方式來獲得的效果：

<a>

您可以更改填充
您可以更改圖片的background-position

來源

2015-01-03 20:36:42

我編輯與圖片的問題，所以你可以看到我的意思的影響。 – planktone

好的，所以在這裏你可以使用行高解決方案http://jsfiddle.net/47Lngd4t/4/ –

我改變

.contact li a { 
padding: 3px 0 0 25px; 
... 
}

到

.contact li a { 
padding: 2px 0 0 25px; 
... 
}

所以，從3px的爲2px。似乎爲我準備。

來源

2015-01-03 20:39:25

背景圖片精靈懸停不對齊

回答

相關問題