使用HTML和CSS溢出到身體？

我想讓我的一個div的背景圖像溢出到正文部分。我試過溢出：可見沒有任何運氣。使用HTML和CSS溢出到身體？

檢查圖：

wish it would overflow

見金位都怎麼就div的邊緣切斷？請提出建議？

這裏是我的設立：

在HTML

：在CSS

<body> 
<div id="container">

：

body{ 
    background-color: #0e0a04; 
} 

#container{ 
     max-width: 960px; 
    margin: 0px auto; 
    padding: 0px; 
    margin-top:60px; 
    background-color: #0e0a04; 
    background-image: url(/bundles/tabredirector/images/background-image.png); 
    background-repeat:no-repeat; 
    background-position: -70px -20px; /*x,y*/ 
    overflow:visible; 
}

謝謝！

我結束了實施：

感謝您的所有建議，他們激發了我的解決方案。我的最終解決方案是使用主div（位置：相對於z-index：-1）和我的容器（位置：絕對z-index：1）並將圖像粘貼在絕對可定位的主div中。通過這種方式，內容始終位於頂部，背景不會被剪裁。

來源

2012-02-17 Adam Waite

代碼請..我們不知道你的結構 – ggzone 2012-02-17 11:14:56

使用背景將無法正常工作，因爲背景不喜歡的內容溢出會。你不能使用'img'？ – 2012-02-17 11:21:31

添加代碼問題，對不起 – 2012-02-17 11:22:34

首先發布您的標記和CSS。也給這個div一個寬度：100％。

來源

2012-02-17 11:17:39 Abhidev

添加代碼問題，對不起 – 2012-02-17 11:22:48

我需要的div爲960px雖然 – 2012-02-17 11:33:20

您需要確保您的包含div之外有一個div。你可以在上面和下面有一個容器，容納你所有的其他內容。

然後，您需要有一個100％寬度div與完整的bg圖像居中。

然後在該div中爲您的內容添加另一個div，該div可以是960寬度並帶有自動向左和向右的頁邊距以將其居中放置到頁面中。

粘貼您的HTML在您的文章以及CSS是不夠的，因爲你需要添加到您的HTML！

由於

的元件上

來源

2012-02-17 11:44:13

背景圖片僅出現的元件內。

如果你希望你的<div>的背景圖像的<div>的邊界之外出現，你需要指定背景圖像到另一個元件代替，例如<body>元素。

來源

2012-02-17 11:56:29

繼承人一個簡單的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
.container { 
    padding: 0px; 
    width: 960px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
#fullWidthImage { 
    background-color: #0F9; 
    height: 200px; 
    width: 100%; 
} 
#centeredContent { 
    padding: 0px; 
    width: 960px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    height: 200px; 
    background-color: #09C; 
} 
</style> 
</head> 

<body> 

<div class="container"> 
    <p>&nbsp;</p> 
    <p>top site content </p> 
    <p>&nbsp;</p> 
</div><!--container--> 

<div id="fullWidthImage"> 
<div id="centeredContent"> 
content bla bla 
</div> 
</div><!--fullwidthImage--> 

<div class="container"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>bottom of site content </p> 
</div> 
<!--container--> 
</body> 
</html>

來源

2012-02-17 12:08:53

使用HTML和CSS溢出到身體？

回答

相關問題