CSS 그래디언트, 배경 이미지가 마우스 오버시 사라짐

Question

상단의 nov에있는 페이스 북 로고가 마우스 위로 사라집니다. CSS 그라디언트가 적용되었지만 fb 로고 자체를 제외하고는 이미지가 없습니다. 로고를 가리 키기 상태로 유지할 수있는 방법이 있습니까?

css file here

감사합니다! 호버에 페이스 북의 배경이 그라데이션으로 덮어 쓰기 때문에

page here

Answer 1

또는 아이콘을 배경에서 분리 할 수 ​​있습니다. 즉, CSS를 사용하여 "facebook"텍스트 앞에 아이콘을 배치하여 배경 선택기와 완전히 독립적입니다. 좋아요 :

li.facebook a::before { 

content: ""; 
position: absolute; 
top: 50%; 
left: 0; 
width: 16px; /* Width of your FB icon */ 
height: 16px; /* Height of your FB icon */ 
margin-top: -9px; 
background-image: url("path_to_your_FB_icon.png"); 
background-repeat: no-repeat; 

} 

희망이 있습니다.

Answer 2

당신은, 여러 배경을 사용해야합니다.

ul#topnav li.facebook a:hover { 
background-image: url("../pics/facebook-icon.png"), 
      linear-gradient(center top , #444444 0%, #A1A1A1 6%, #575757 100%); 
/* facebook icon is on top of a linear gradient */ 
background-repeat: no-repeat, repeat; 
background-position: 8px 2px, 0 0; 
} 

물론 모든 공급 업체 접두사에이 규칙을 추가해야합니다. (-moz-, -webkit-, ...)