Question

我想用一个非常大的图像作为我的菜单。

菜单文本可以是图像的一部分或图片上的某种方式（虽然不知道如何将其定位为文本），我的问题是图片没有固定的空间，如下图所示:(无法使用图片导致低代表：/）

http://stack.imgur.com/ogGdp.jpg

文本将在这些气泡中，当我清理它们时，文本应该是不同的颜色并圈出来。

我正在考虑使用图像映射，并使用多个图像，每个图像都有不同的文字盘旋，并有彩色，并在胡佛效果图片之间切换，但图像相当大，我希望那里是一个更好的解决方案？

我希望我的问题很明确，

感谢!!!

Answer 1

有一个更好的解决方案。肯定会有图像地图在这里发挥作用，但如果你想添加悬停效果和花哨的东西，你将会更好地利用现代技术。

文字：将文字作为文字而不是图像的一部分（文字将更改）会更好。只需将每个菜单项放在自己的<a>
定位文字：制作这些菜单项absolute ly position，然后将它们放置在适合背景图片的任何位置。
悬停效果：将文字作为文字可以更容易地添加这些效果，更改颜色等。

让我们把一些代码放在口中：

<div class="menu">
  <a href="link1" id="menu-item-1">Item 1</a>
  <a href="link2" id="menu-item-2">Item 2</a>
</div>


.menu{
    background-image: url(http://stack.imgur.com/ogGdp.jpg);
    position: relative;
    height: 450px;
    width: 450px;
}
.menu a{
    position: absolute;
}
.menu a:hover{
    color: red;
}
#menu-item-1{
    top: 100px;
    left: 80px;
}
#menu-item-2{
    top: 220px;
    left: 250px;
}

请在此处查看：

http://jsfiddle.net/3pa1skqs/

使用一个图像作为菜单

1 个答案: