Блог

Главная - Вопросы по программированию - текст поверх изображения в меню элемента списка

текст поверх изображения в меню элемента списка

#css

#css

Вопрос:

У меня есть меню перед каждым меню, и перед каждым li у меня есть изображение, иллюстрирующее меню.

Мой код: http://jsfiddle.net/dtjmsy/7UHxa/2 /

 <div>
  <ul>
    <li><a href="">
        <img width="40" height="14" src="http://img11.hostingpics.net/pics/902607libkgd.png" alt="li_bkgd">Example menu 1</a></li>
  </ul>
</div>

Мой вопрос в том, как мне расположить текст поверх изображения?

Спасибо за вашу помощь

Ответ №1:

Используйте image в качестве фонового изображения элементов списка.

Согласно вашим комментариям, я получил ваше требование. Итак, вот решение и его объяснение.

1- Вам нужно показать изображение под текстом. Поэтому в нижней части элемента должно быть немного места li . Для этого мы должны использовать заполнение внизу.

2- Поскольку вам также необходимо использовать фоновое изображение, чтобы изображение, но положение фонового изображения по умолчанию не было задано так, как вы хотите. Так что вам тоже нужно с этим поиграть.

Вот ваш css

 #menu li
{
    background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
    background-position:0px 10px;  // 0px from the left and 10px from the top
    padding:0px 0px 10px 10px;     // 10px padding from the left and bottom to shift the text according to image position
}

Демонстрация Js Fiddle

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

1. Привет, я тоже пробовал, то же самое, как бы мне расположить точное начало текста поверх изображения

2. Привет, Сачин, я бы хотел, чтобы текст был чуть выше затмения, чтобы я мог видеть всю картинку, спасибо.

3. Привет, Сачин, что-то вроде этого img11.hostingpics.net/pics/659256eclipsetext.jpg

4. Привет, Сачин, это именно то, что я хочу, большое спасибо, я пытаюсь понять ваш css, код background-position: 0px 10px; это переместить фон вниз на 10 пикселей, верно?, но я не очень понимаю отступы: 0px 0px 10px 10px;

5. Спасибо Сачину и всем вам. С уважением

Ответ №2:

Просто измените свой стиль, как показано ниже

 #menu {
    list-style-type:none;
}
#menu li {
    background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
    background-position:bottom left;
    height:30px;
    padding-left:15px;
}

Надеюсь, это должно сработать..

Ответ №3:

Ваш HTML:

 <div id="menu">
  <ul>
    <li><a href="#">Example menu 1</a></li>
  </ul>
</div>

И пример CSS:

 #menu li
{
    background :url('example.png') no-repeat;
    background-position: left 1px top -1px;
}

Также вы можете использовать различный фон для каждого элемента:

 #menu li:first-child
{
    background :url('example.png') no-repeat;
    background-position: left 1px top -1px;
}

Также :last-child и nth-child(2) выбирает каждый <li> элемент, который является вторым дочерним элементом его родителя