텍스트와 이미지가 모두 포함 된 탐색 메뉴 만들기

Question

하단에 이와 같은 탐색 메뉴를 만드는 방법에 대해 조언 해 주시겠습니까? https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png

이미 바닥 글 div가 설정되어 있으므로 메뉴 자체 만 있으면됩니다. 나는 시도하고 실험했지만 정확히 원하는대로 표시 할 수 없었다. 이미지는 CSS 배경이 있어야 "탭"이 활성화되었을 때 이미지가 변경 될 수 있습니다.

미리 감사드립니다.

Answer 1

background-image 속성을 사용하는 것이 어떤 식 으로든 실제로 필요하지는 않습니다.

이 탐색 바의 HTML 구조에서 보통 <img src="pics/my-img.png" />을 사용할 수 있습니다. 대부분의 경우 아래 그림과 같은 컨테이너의 텍스트를 삭제합니다 이미지를 단순히 아무것도 정렬을 설정하지만, 예외의 경우 : 이것은 내가 당신의 질문을 이해 무엇을 도와해야

#myNavigation img { 
    display: block; 
    padding-bottom: 4px; 
} 

, 이미지와 텍스트가 포함 된 탐색 메뉴를 만들려고합니다.

예컨대을 위해, 또한 이것에 대한 아주 간단하고 좋은 호버 효과 가능성있다 :

#myNavigation img { 
    opacity: 0.6; 
} 
#myNavigation img:hover { 
    opacity: 1; 
} 

행운을 빌어 요!