Блог

Главная - Вопросы по программированию - Простая реализация вкладки с но как установить фоновое изображение вкладки?

Простая реализация вкладки с но как установить фоновое изображение вкладки?

#html #css

#HTML #css

Вопрос:

Я реализовал простую навигацию по вкладкам, используя <ul><li><a> , проблема в том, что на каждой вкладке все еще требуется несколько «слоев«. я имею в виду, что в моей текущей реализации у меня есть:

  • -текст вкладки, который <a>text</a>
  • -на каждой вкладке у меня есть изображение значка вкладки, которое я помещаю в <li> качестве фонового изображения <li> ,

Но мне все еще нужно:

  • —изображение разделителя вкладок (изображение вертикальной полосы), которое я намереваюсь поместить <a> , и расположить его с левой стороны background-position: left , оно работает, но этой реализации нет в моем коде, который я показал ниже на сайте jsfiddle, потому что я не нашел подходящего изображения в Интернете
  • -фоновое изображение вкладки, которое занимает всю вкладку, я понятия не имею, куда я должен поместить это изображение?

Пожалуйста, проверьте и запустите мою реализацию здесь, на jsfiddle, в коде css, который я использовал background-color вместо background-image того, чтобы просто выразить то, чего я хочу достичь, но мне нужно использовать background-image в качестве фона вкладки.

Что я пробовал:

  • Я попытался включить фоновое изображение вкладки <li> , но оно скроет изображение значка, которое уже включено <li> ,
  • Я попытался включить фоновое изображение вкладки <a> , но оно также скроет изображение разделителя вкладок при наведении курсора мыши

Как тогда избавиться от этого пробного слоя при реализации вкладки? (Пожалуйста, не предлагайте мне использовать меньше изображений, поскольку использование этих изображений является одним из требований этого приложения.)

(Кстати, все изображения, о которых я упоминал, имеют аналог «наведения мыши»)

Комментарии:

1. у вас есть файл дизайна (изображение) ваших конечных результатов?

Ответ №1:

Если вы не хотите изменять HTML, вы можете использовать псевдоэлементы:

Скрипка: http://jsfiddle.net/Pq7LC/39 /

 li:before{
    content: "";
    background: pink;
    width: 20px;
    height: 61px;
    display: block;
    position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
    content:none;
}

Ответ №2:

Вы можете сделать это с помощью css, изображения не нужны.

http://jsfiddle.net/Pq7LC/40/

Надеюсь, это помогло вам 🙂

Метки: