css - 不确定是 Chrome 上的渐变错误还是我的代码有问题

Question

没错。标题说的是什么。

我使用 input-checked hack 使下拉菜单在单击箭头按钮时可见。然后可以通过单击十字按钮再次关闭它。 “按钮”是标签内的一个跨度。 html 看起来像这样:

    <div>
        <input id="pubs" type="checkbox">
        <label for="pubs" onclick><span></span></label>
        <h3>Pubs</h3>

        <ul>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </div>

由于输入/标签对和下拉菜单需要在同一个父级内才能使黑客工作，我想为标签区域设置背景色和不同的颜色(透明)对于下拉菜单，我使用的是水平线性渐变，如下所示:

div {
    background-image: linear-gradient(yellow 4em, transparent 4em);
    background-size: 100%;
}

其中 4em 是可见区域的高度。如果您打开 Chrome 并将该代码复制并粘贴到 this CSS patterns gallery 中，它就可以工作。但是，它在实现点击显示时不起作用；这个东西看起来是透明的，只有当你点击黄色背景的箭头按钮时。检查 DEMO 。在 FF 中打开它，然后在 Chrome 中打开它，看看我的意思。

我不确定问题出在哪里，我什至疯狂使用供应商前缀以使其正常工作，但惨遭失败。你能重现这个问题吗？有人知道出了什么问题吗？我已经没有想法了。

干杯!

Answer 1

你忘记了第一站。

改变你的渐变:

background-image: linear-gradient(yellow 4em, transparent 4em);

收件人:

background-image: linear-gradient(yellow 0, yellow 4em, transparent 4em);