使用CSS模拟图像"叠加"效果

Question

使用CSS模拟图像"叠加"效果

htmlcssbackground

3

基本上我正在尝试使用图片和CSS模拟Photoshop的图像叠加效果，用于菜单。菜单背景图片有两个版本：一个是正常状态（粉色），另一个是活动状态（蓝色）。整个菜单都包裹在一个DIV中，使用正常（粉色）图像作为背景。

如何使每个活动菜单链接使用相应的蓝色图像切片呢？就像这样：

你认为这可以通过CSS实现吗？ 我的代码

- Alex

你能提供你目前的代码吗？ - James Montagne

1

我不会使用图像。这完全可以仅通过CSS实现。 - AlienWebguy

我在考虑在链接中放置一个带有背景的span元素，宽度相对于整个菜单为100％，并使用z-index来实现此目的... - Alex

我会让它更加灵活一些。目前最大的障碍是高亮部分非常长而且不一致的高度。你几乎需要再次复制每个位置并进行悬停操作。我会让中间部分的高亮保持一致的高度直到最后。http://img192.imageshack.us/img192/2115/qztun.jpg 这会稍微改变菜单图像，但这是我愿意做出的牺牲。 - Joonas

3个回答

1

如果您需要支持旧版浏览器并且无法使用CSS3，则有许多方法可以实现。其中之一：

您可以剪切整个蓝色图像（实际上可以使其更宽）

然后

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. */

- Zhenya

1

你是否会在圆角处添加链接？如果不是，你可以只取蓝色图像的一个像素宽度切片，并将其设置为:hover状态的背景，使用repeat-x。

当然还有其他方法可以实现这个效果，但我认为这是最直接的方法。

编辑：看了你的fiddle之后，也许情况并非如此。我建议使用JavaScript来计算每个链接的适当x偏移量，并以这种方式使用覆盖图像的一部分。或者您可以将第一个链接作为“特殊情况”，并为其余链接使用通用的不同颜色背景。

- Karl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlienWebguy · Accepted Answer

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);
}

点击查看一个工作演示：http://jsfiddle.net/AlienWebguy/ZLg4B/