Html “模拟图像”；“覆盖”；使用CSS

基本上，我尝试使用图像和CSS作为菜单来模拟Photoshop的图像叠加功能

菜单背景图像有两种版本：一种是正常状态（粉红色），另一种是活动状态（蓝色）。整个菜单包装在一个DIV中，以普通（粉色）图像为背景

如何使每个活动菜单链接使用蓝色图像的相应部分

像这样：

---

您认为CSS可以实现这一点吗？

现代浏览器的CSS唯一解决方案：

ul {
    background-color:#ff00ff;
    background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);  
    background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    height:50px;
    width:400px;
    margin:0;
    padding:0;
    border-radius:25px;
    overflow:hidden;
}

li {
    width:100px;
    height:50px;
    float:left;
}

li:hover {
    background-color:rgba(0,0,255,0.2);
}

---

单击以查看工作演示：

您是否打算在圆形部分设置链接？如果没有，您可以只拍摄一个像素宽的蓝色图像切片，并将其设置为

：hover

状态背景和

repeat-x

当然还有其他方法可以做到这一点，但这是最直接的方法

---

---

编辑：看到你的小提琴后，也许情况并非如此。我会考虑使用JavaScript为每个链接计算适当的X偏移量，并以这种方式使用覆盖图像的切片。或者，您可以将第一个链接设为“特殊情况”，并对其余链接使用通用的不同颜色背景。

如果您需要支持较旧的浏览器，而无法使用css3，可以通过多种方法来实现。其中一个：

你可以把整个东西的蓝色图像剪下来（实际上你可以把它弄得更宽）

然后

---

你能提供你当前的代码吗？我根本不会使用图像。这在CSS中是完全可行的。我正在考虑在链接中放置一个背景的span元素，相对于整个菜单的宽度为100%，并使用z-index来实现这一点……我会让它更灵活一些。这是一个很大的障碍，是真正长的不一致高度的突出。你几乎必须用悬停再次复制每个位置。。我会让中间部分突出一致的高度，直到最后。它改变了菜单图像一点，但这是一个牺牲，我会作出的。+1出色的工作！虽然我不想带着导航栏去访问这个网站；就我个人而言，我认为这有点太苛刻了，但我认为这是断章取义的。没有不敬@OP。在现实中它看起来不会像这样，这只是一个想法：）无论如何，菜单太复杂了，仅用CSS无法复制。我需要这些图像…我想如果要提供更多帮助，我们需要一个图像复杂性的例子。

li.active {
    background: url('path/to/yourImage.png') no-repeat -50px 0;
    /* 50px or however wide that rounded tip is */
}

li.active.first {
    background-position: left top;
}

li.active.last {
    background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */