Создание меню навигации с текстом и изображениями

Question

Не могли бы вы посоветовать, как создать навигационное меню, подобное этому внизу? https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png

У меня уже есть набор нижнего колонтитула, мне нужно только меню. Я пробовал и экспериментировал, но не мог отобразить его так, как хочу. Изображения должны быть с фоном 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; 
} 

Успехов!