代码之家 › 专栏 › 技术社区 › Community wiki

背景图像不会在ContentPlaceHolder和子页面之外垂直重复

css html

Community wiki · 技术社区 · 2 年前

我认为这应该是一个容易解决的问题,但它变成了我无法解决的问题。

无论出于何种原因,如果ContentPage不包含其他div,则我在全局内部指定并在MasterPage中使用的背景图像(main_bg.gif)将仅在MasterPage内的内容页上垂直重复。

对于MasterPage中的其余div(如底部换行),图像(main_bg.gif)不会向下拉伸。它只对内容页中包含的内容重复。

以下是CSS中用于子页面的顶级功能,它不会使全局内部的图像重复:

#top-feature 
{
height:330px;
width: 848px;
margin: 12px 0 0 16px;
/*background: #E4EAEF;*/
background: orange;
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}

以下是MasterPage中使用的CSS:

body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}    

#global-wrap 
{
width: 100%;
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}    

#global-inner 
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 0 0;
overflow: hidden;
text-align: left;
width: 880px;
}

这是主页中的HTML。同样,任何超出ContentPlaceHolder即底部换行的内容都不会包含在该图像中(main_bg.gif):

<div id="global-wrap">
    <div id="global-inner">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        <div id="bottom-wrap">
            <div id="copyright">
                Copyright Â© 2011 by DaVinci's Painting, Inc.
                <br />
                2111 Jefferson Davis Hwy, Arlington, Virginia
                <br />
                Call Direct: 202-460-1754
                <br />
                Site Development by <a target="blank" href="http://www.websitedeveloper.com">WebSiteDeveloper.com</a>
            </div>
            <div id="bottom-logos">
            </div>
            <div id="sociales">
                <span class="st_twitter_large" displaytext="Tweet"></span><span class="st_facebook_large"
                    displaytext="Facebook"></span><span class="st_ybuzz_large" displaytext="Yahoo! Buzz">
                    </span><span class="st_gbuzz_large" displaytext="Google Buzz"></span><span class="st_email_large"
                        displaytext="Email"></span><span class="st_sharethis_large" displaytext="ShareThis">
                        </span>
            </div>
        </div>
    </div>
</div>

2 回复 | 直到 14 年前

Dan 14 年前

通过添加 overflow:hidden; 到您的 #global-inner 样式,这将解决浮动不被清除和显示背景图像的问题。

此外,在左角和右角使用单独的空DIV可能不是最好的想法或做法。你查过了吗 CSS3 圆角作为使用图像的替代方案?

例如:

    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;

    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;

Paul 14 年前

包含需要垂直重复的图像的父分区的子分区不能将其位置设置为绝对。

在我的MasterPage示例中:底部换行的位置设置为绝对。当它更改为position:relative时,全局内部垂直拉伸的父图像将一直向下拉伸,以包括底部换行div。