Question

我试图制作一个带有水平渐变的菜单栏。我使用-webkit-background-clip取得了一些成功，但在Firefox中无法使用。

我发现了一个jQuery插件pxgradient，它与浏览器兼容，但是我不能让它跨越几个li元素的渐变。请参阅以下jsfiddle：

function gradient1() {
    $(".test").pxgradient({
        step: 10,
        colors: ["#ff0066", "#2850FF"],
        dir: "x"
    });
};

我希望渐变更像顶部渐变。理想情况下，我喜欢边框底部在悬停时包含相同的渐变，但我可能生活在没有它的世界中。

PS- font-awesome图标只是因为它早先给我带来了问题，所以我现在包括它以确保它有效。

更新我正在玩的另一个可能的想法是读取元素的数量，然后划分每个元素的颜色，并使用nth-child（）选择器来分配每种颜色。

<script>
//Get number of list items
var menuItems = $("li").children().length;

//Convert colors to hex
hexString1 = '2850FF';
hexString2 = 'FF0066';
color1 = parseInt(hexString1, 16);
color2 = parseInt(hexString2, 16);

//Calculate difference in colors and color step
colorDifference = color2 - color1;
colorStep = colorDifference / (menuItems - 1);
colorStep = parseInt(colorStep);

//Loop through elements and apply gradients
for (i = 0; i < menuItems; i++) {
    newColor1 = color1 + (i * colorStep);
    newColor2 = color1 color2 -1;
    gradientStart = newColor1.toString(16);
    gradientEnd = newColor2.toString(16);

    //use gradientStart and gradientEnd as colors in the function, not sure on this part yet

}

</script>

虽然看起来有点矫枉过正，但必须有一个更简单的解决方案吗？与具有少量字符的元素相比，具有许多字符的元素将具有相对慢的梯度。这可以通过计算每个元素的字符数来解决，但它似乎都是相当低效的。

Answer 1

一种简单的解决方案，可在FF，Chrome和Safari中使用混合模式。

诀窍是渐变设置在ul。

中的a下

设置混合混合模式：屏幕，此颜色仅显示在黑色位置（文本和悬停时的边框）

＆＃13;

ul {
    display: inline-block;
    padding: 0;
    font-size: 30px;
    font-weight: bolder;
    background: linear-gradient(90deg, red, blue);
}
li {
    mix-blend-mode: screen;
    background-color: white;  
    box-shadow: 8px 0px 0px white;
}
li, li a {
    display: inline-block;
    text-decoration: none;
    border-bottom: 3px solid white;
}
li:hover a {
    border-bottom: 3px solid black;
    text-shadow: 0px 0px 2px gray;
}

＆＃13;

<div class="navigation">
	<ul>
		<li><a href="#">Nav 1</a></li>
		<li><a href="#">Nav 2</a></li>
		<li><a href="#">Nav 3</a></li>
		<li><a href="#">Nav 4</a></li>
		<li><a href="#">Nav 5</a></li>
	</ul>
</div>

＆＃13;

渐变文本跨浏览器

1 个答案: