2012-05-21 6 views
0

사용자가 링크 위에 커서를 놓을 때 배경 이미지 불투명도 (0에서 100 %까지)를 사용하려고합니다. 이 같은 떨어지게 있습니다CSS3를 사용하여 마우스 오버시 배경 이미지 불투명도 전환

<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 누구든지 어떤 생각이 있습니까? 미리 감사드립니다.

답변

0

일반적으로 CSS3의 전환 애니메이션은 background-image 및 background-position과 같은 기존 CSS 속성에서만 작동합니다. 필요를 충족시키는 배경 불투명도 필드가 없습니다. 속성이 변경되면 전환이 발생합니다.

배경 이미지를 변경하면 원하는 전환이 이루어질 수 있습니다 (일부 브라우저에서는 이전 버전 인 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을 지정하십시오.

+0

는 RGBA의 불투명도를 전환 할 수있는 방법은 없습니다 ? –

+0

@WillHancock 당신은 rgba 전환을 만들 수 있습니다, 그것은 rgb 색상과 같은 방식으로 작동합니다. – xiaoyi

0

background-image을 상속받은 :before 요소를 사용합니다.

이와 비슷한 것. -

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>

UPDATE이 같은 배경 이미지,이 같은 무언가를 애니메이션을 적용 할 경우 :

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>

관련 문제