1

我有一个框阴影应用于标题 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 演示

4

2 回答 2

0

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

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

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

于 2013-08-14T02:12:02.163 回答
0

看起来在 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;
}
于 2013-08-14T02:14:58.790 回答