사용자가 링크 위에 커서를 놓을 때 배경 이미지 불투명도 (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 누구든지 어떤 생각이 있습니까? 미리 감사드립니다.
는 RGBA의 불투명도를 전환 할 수있는 방법은 없습니다 ? –
@WillHancock 당신은 rgba 전환을 만들 수 있습니다, 그것은 rgb 색상과 같은 방식으로 작동합니다. – xiaoyi