Объединить img и фоновое изображение

#html #css

#HTML #css

Вопрос:

Возможно ли вставить изображение на задний план, чтобы оно стало просто фоном.. Например, это та же задача, как если бы я объединил фоновое изображение страницы с этим конкретным изображением в photoshop, а затем вставил его на веб-страницу в виде ОДНОЙ картинки. Но мне любопытно, возможно ли вставить изображение через HTML. Потому что у меня проблема с меню на моем веб-сайте. Когда я открываю меню, вставленное изображение не находится на заднем плане, на самом деле оно отображается перед фоном, поэтому мое меню не запускается из-за этого.. Спасибо.

Код:

 <ul class="nav_menu">
            <li id="idea_list">
                <a href="@Url.Action("Techniques", "Menu")">
                    Home
                </a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item2</a></li>
                </ul>
            </li>
            <li id="challenges_list">
                <a href="#">
                    Challenges
                </a>
                <ul>
                    @* jQuery generated items *@
                </ul>
            </li>
        </ul>

И у меня есть изображение на заднем плане под этим меню с абсолютным положением, которое мешает работе меню, когда оно открыто.

   <img class="menu_pointer" src="~/Content/Images/minified/idea_menu.png">

1. Пожалуйста, опубликуйте свой код, но, похоже, проблема с z-index

2. как вы могли подумать, что кто-то может дать вам точный ответ, решающий проблему, когда вопрос похож на историю?

3. @KingKing Cmon, чувак, почему ты такой злой? Остыньте, я думал, что это просто тривиальный вопрос для вас, ребята.

4. @ShukhratRaimov как ты думаешь, почему я такой злой? Я даже не отрицал ваш вопрос, запомните это, пожалуйста, когда я зол, я обязательно отрицательно отвечу на вопрос и даже проголосую за закрытие и отмечу его как низкое качество.

5. Можете ли вы настроить свои изображения? поэтому, пожалуйста, укажите полный путь к изображениям

Ответ №1:

Просто поместите изображение перед навигацией.

HTML:

  <img class="menu_pointer" src="~/Content/Images/minified/idea_menu.png">

<ul class="nav_menu">
            <li id="idea_list">
                <a href="@Url.Action("Techniques", "Menu")">
                    Home
                </a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item2</a></li>
                </ul>
            </li>
            <li id="challenges_list">
                <a href="#">
                    Challenges
                </a>
                <ul>
                    @* jQuery generated items *@
                </ul>
            </li>
        </ul>

CSS:

 div {
  width: 300px;
  height: 300px;
  color: yellow;
  background:
    url(http://fc02.deviantart.net/fs70/f/2012/171/7/0/png_cat_by_eross_666-d5459oe.png) no-repeat bottom right,
    url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat top left
    ;
  background-size: 70%;
}

1. Нет, к сожалению, это не решает проблему, пункты меню <li> по-прежнему мешают изображению.

2. попробуйте поместить тег img над навигацией, если вам не нужно указывать его положение в документе.

3. Спасибо, @jacelysh. Пожалуйста, отредактируйте свой ответ, чтобы я мог установить его как принятый.