[英]Background Image wont repeat vertically beyond the ContentPlaceHolder and Child Page
我認為這應該是一個容易解決的問題,但是它變成了我無法解決的問題。
無論出於何種原因,在global-inner中指定並在MasterPage中使用的我的背景圖像(main_bg.gif)僅在MasterPage中的內容頁面上垂直重復,如果事實上ContentPage不包含其他div。
對於MasterPage中的div的其余部分(例如下環繞),圖像(main_bg.gif)不會向下拉伸。 它僅對內容頁面中包含的內容重復。
這是子頁面的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;
}
這是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;
}
這是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
樣式,這將解決未清除浮點並顯示背景圖像的問題。
另外,對於左,右角使用單獨的空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;
包含需要垂直重復的圖像的父Div的子Div不能將其位置設置為絕對位置。
在我的MasterPage示例中:bottom-wrap的位置設置為絕對。 當將其更改為position:relative時,global-inner內部的父圖像會一直向下垂直拉伸,直到包括底部換行div。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.