Question

我创建了一个2268px宽的标题图片，中间有一个普通标题，然后是页面背景（支持更大的显示器，如mac）。

我在父元素上设置了overflow-x: hidden但是我仍然可以滚动到它。所以基本上我试图拥有一个不会发送页面的背景图像。

HTML：

<div id="page" class="hfeed">
<div id="headerBg">
    </div><!-- End #headerBg -->
    <header id="branding" role="banner">
            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->
    </header><!-- #branding -->

CSS

#headerBg{
    position: relative;
    background-image: url('img/headerBg.gif');
    margin-left: -633px;
    height: 362px;
    width: 2268px;
}

Answer 1

您需要做的是给它一个自动边距，使其在页面上居中。这样你就不需要左边距，这导致它滚动。

Answer 2

您只需在CSS声明中添加以下内容：

#page {
    overflow-x:hidden;
}

它禁用由超大图像引起的滚动条渲染。见http://jsfiddle.net/uXFT4/

请注意，您希望它可以使用的所有浏览器都不支持overflow-x和overflow-y。如果可能，请使用overflow。

Answer 3

如果不设置宽度和边距，则无法达到需要设置父级溢出的程度。将背景定位在中心，而不是元素本身（带有负边距），您可以将其保留，浏览器自己完成。没有滚动条。

#headerBg {
    background-image: url('img/headerBg.gif');
    background-position: top center;
    height: 362px;
}

使用bg图像分割页面，如何不滚动页面

3 个答案: