與CSS3懸停的背景圖像不透明度轉換

Question

我試圖在用戶將光標放在鏈接上時使用背景圖像不透明度（從0到100％）轉換。 我有水木清華這樣的：

<div class="menu"> 
<ul class="sf-menu"> 
    <li class="page_item page-item-2"> 
    <a href="http://filip-hostel.pl/?page_id=2">o nas</a></li> 
    <li class="page_item page-item-6"> 
    <a href="http://filip-hostel.pl/?page_id=6">oferta</a></li> 
    <li class="page_item page-item-8"> 
    <a href="http://filip-hostel.pl/?page_id=8">galeria</a></li> 
    <li class="page_item page-item-10 current_page_item"> 
    <a href="http://filip-hostel.pl/?page_id=10">cennik</a></li> 
    <li class="page_item page-item-12"> 
    <a href="http://filip-hostel.pl/?page_id=12">kontakt</a></li> 
</ul> 
</div> 

和CSS：

.sf-menu a, .sf-menu a:visited{ 
border:none; 
color:#ffffff; 
font-family:Arial; 
font-size:16px; 
line-height:72px; 
width:65px; 
text-align:center; 
padding:0px; 
margin:0; 
background:none; 
-webkit-transition: 1.0s ease-in; 
    -moz-transition: .01s ease-in; 
    -o-transition: 1.0s ease-in; 
    -ms-transition: 1.0s ease-in; 
    transition: 1.0s ease-in; 

} 

.sf-menu li:hover{ 
background:none; 
} 

.sf-menu a:hover{ 
background: url(img/menu_hover.png) center center no-repeat; 

} 

.current_page_item a{ 
background: url(img/current_page.png) center center no-repeat; 
} 

它適用於current_page_item但不能在其他人正常工作。 你可以看到它看起來如何HERE Doeas任何人有任何想法？ 提前致謝！

Answer 1

通常，CSS3的過渡動畫只適用於現有的CSS屬性，比如background-image和background-position。沒有背景不透明的領域來滿足您的需求。當一個屬性發生變化時會發生轉換。

你想要的過渡是通過改變背景圖像暗示（一些瀏覽器不顯示這是一個淡入出過渡，像早期版本的Firefox），在這種情況下，對於.current_page_item a兩種不同的狀態將是background-image: url(img/current_page.png);和background-image: url(img/menu_hover.png);，其他屬性相同，如background-position。但是對於.sf-menu a，這兩種狀態是完全不同的，從background-iamge: none; background-position: left top;到background-image: url(img/menu_hover.png); background-position: center center;沒有辦法在不存在的圖像和新圖像之間顯示動畫，因此沒有淡入淡出轉換。

如果您確實需要此動畫，請嘗試使用包含您的A的剪輯框（LI），並給出A的半徑邊框和background-color。

Answer 2

我會使用:before繼承background-image的元素。

就是這樣。

a { 
 
    background: black url('http://umea.ee/thumb.jpg') 0 0 no-repeat; 
 
    background-size: 0 0; 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
a:before { 
 
    background-image: inherit; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    content: ''; 
 
    height: 100%; 
 
    left: 0px; 
 
    opacity: 0.5; 
 
    position: absolute; 
 
    top: 0px; 
 
    width: 100%; 
 
    z-index: -1; 
 
    -webkit-transition: opacity 300ms; 
 
    transition: opacity 300ms; 
 
} 
 
a:hover:before { 
 
    opacity: 1; 
 
}

<a href="#">I am link</a>

更新 - 如果要動畫相同的背景圖像，則這樣的事：

a { 
 
    background: black url('http://umea.ee/thumb.jpg') top left no-repeat; 
 
    background-size: 100% 200%; 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 1em; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
a:before { 
 
    background: inherit; 
 
    background-size: inhertit; 
 
    background-position: bottom right; 
 
    content: ''; 
 
    height: 100%; 
 
    left: 0px; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0px; 
 
    width: 100%; 
 
    z-index: -1; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 300ms; 
 
    transition: opacity 300ms; 
 
} 
 
a:hover:before { 
 
    opacity: 1; 
 
}

<a href="#">I am link</a>