使用图像 Alpha 数组悬停

Question

我需要一排链接，每个链接都在一个平行四边形的盒子里。 顺便说一句，我正在使用 Divs。 我需要每个盒子交替黑/白。 我希望每个框都有一个独特的悬停颜色。

<div id="bar2">
    <ol>
        <script type="text/javascript">
            for (var i = 0; i < 5; i++)
            {
                document.write("<a href='");
                document.write(chapLink[i]);
                document.write("'><li id='li" + i + "' style='background-color:" + chapCol1[i] + "; color:" + chapCol2[i] + "'>");
                document.write(chapter[i]);
                document.write("</li></a>");

                document.write("<img src='paragram");
                document.write(i+1);
                document.write(".png'>");
            };
        </script>
    </ol>



var chapCol1 = new Array();
chapCol1[0] = 'white';
chapCol1[1] = 'black';
chapCol1[2] = 'white';
chapCol1[3] = 'black';
chapCol1[4] = 'white';

该数组适用于填充每个形状的大部分，但不出所料，它并没有完全覆盖它。这使我假设我需要使用一系列图像，一个用于悬停产生的每种颜色组合。

提前致谢 - 希望我的问题很清楚， 哈利

Answer 1

好的，让我尝试按功能回答： 对于平行四边形盒子： 如果我理解得很好，您需要交替的黑色和白色块，并且您希望这些块内的文本颜色是唯一的。我不明白您为什么在关闭<li> 后尝试插入图像。我猜你正试图将平行四边形插入块中，对吧？ 如果您希望 <li> 根据您的 PNG 图像进行塑造，我建议您将其用作块的背景图像，而不是仅在之后插入它。为此，只需在块的样式属性中写入background-image: your_path/your_image.png;。您可能需要调整块的大小，因为图像可能会被“剪切”。 要调整大小，只需执行以下操作：例如，假设您的图像宽度为 10 像素，高度为 20 像素，并且您希望块与图像具有相同的大小。只需在块的样式属性上写下以下内容：width:10px;height:20px; 但无论如何，我仍然认为我没有完全理解你想要做什么。 关于您最后一条评论说您无法填充整个形状：这可能是因为li 标签具有默认的margin 值，而background-color 对边距没有影响。

对于悬停颜色，只需将以下内容添加到您的 div 中： onmouseover='this.style.color="unique_color_here";' onmouseout='this.style.color="standard_color_here";'

希望对您有所帮助。如果你能更好地解释你想要什么，那就太好了：D 试着解释一下你所拥有的这些图像到底是什么，以及你想用它们做什么。