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; - 正如它的值所暗示的那样，背景会滚动页面的内容（你的标题）。您应该使用fixed，以便相对于视口修复背景图像。

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

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

Answer 2

在JSFiddle中看起来你正在将背景应用于body标签。这将无效，因为它将应用背景两次是jsfiddle使用iframe渲染你的内容 - 这就是为什么它看起来好像盒子阴影搞砸了，但它不是。

尝试删除body标签和body css

相反，你可以像这样使用HTML：

<div class="outer-container">
<div id="header">
    <div id="logo"> <a href="<?=base_url(); ?>"><img src="http://pierdevara.com/demo/907pass/assets/img/907pass.png" /></a>

        <div id="navBtn"></div>
    </div>
    <div id="navlist">
        <ul>
            <li><a href="coupons">Coupons</a>
            </li>
            <li><a href="trans">Buy / Activate</a>
            </li>
            <li><a href="about">About</a>
            </li>
        </ul>
    </div>
</div>

身体css转换为：

.outer-container {
    background: url(http://pierdevara.com/demo/907pass/assets/img/bg_grassy.jpg) no-repeat center center scroll;
    background-width: 2000px;
    background-height: 1300px;
    height:1300px;
}

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

2 个答案: