Question

是否可以将图像插入背景，因此它只是一个背景..例如，它就像我在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">

Answer 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%;
}

合并img和背景图像

1 个答案: