我认为这应该是一个容易解决的问题,但是它变成了我无法解决的问题。
无论出于何种原因,我在 global-inner 中指定并在 MasterPage 中使用的背景图片 (main_bg.gif) 只会在 MasterPage 中的内容页中垂直重复,如果实际上 ContentPage 不包含其他 div。
对于 MasterPage 中的其余 div,例如 bottom-wrap,图像 (main_bg.gif) 不会为此向下拉伸(stretch)。它仅针对内容页面中包含的内容重复。
这是在子页面的 CSS 中使用的顶级功能,它不会使 global-inner 中的图像重复:
#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;
}
这是母版页中使用的 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;
}
这是 MasterPage 中的 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>
最佳答案
通过将 overflow:hidden;
添加到您的 #global-inner
样式,这将解决 float 不被清除并显示背景图像的问题。
此外,为左右 Angular 使用单独的空 DIV 可能不是最佳想法或做法。您是否研究过 CSS3 圆 Angular 作为使用图像的替代方法?
例如:
-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;
关于html - 背景图像不会在 ContentPlaceHolder 和子页面之外垂直重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5136329/