javascript - 当元素内容扩展且正文具有图像背景时，框阴影渲染不正确

Question

我有一个应用于标题 div 的框阴影。每当我在该标题中显示隐藏元素时，框阴影都无法正确呈现。

<div id="header">
<div id="logo"> 
    <a href="#"><img src="logo.png" /></a>
    <div id="navBtn"></div>
</div>
<div id="navlist"> <!-- hidden -->
    <ul>
        <li><a href="coupons">Coupons</a>
        </li>
        <li><a href="trans">Buy</a>
        </li>
        <li><a href="about">About</a>
        </li>
    </ul>
</div>
</div>

我已经尝试从正文中删除背景图像，当我这样做时，问题不再出现。关于问题可能是什么的任何想法？

JSFiddle Demo

Answer 1

这是因为你正在使用 background-attachment: scroll; - 正如它的值(value)所暗示的那样，背景随着页面内容(您的标题)滚动。您应该改为使用 fixed 以便背景图像相对于视口(viewport)是固定的。

另请注意，background-width 和 background-height 不是有效的 CSS 属性，我相信您正在寻找 background-size属性(property)。

http://jsfiddle.net/RGLR3/6/