如何在HTML/CSS中爲頁面製作中央背景？

我想將頁面的內容添加到背景的一部分。也就是說，我想在主要內容的兩側保留2個未使用的區域列。類似於this，您可以在主要內容的任一側看到2個未使用的藍色區域。還有一個陰影效果。因此，輸入內容的主要白色背景區域必須是圖像。如何在HTML/CSS中爲頁面製作中央背景？

我該如何實現這些目標？

我需要知道如何在屏幕上看到的整個頁面上放置另一張紙張。（我指的是鏈接中的2個未使用的列）。

來源

2012-05-26 batman

這裏還有一個陰影效果。因此，輸入內容的主要白色背景區域必須是圖像。

嗯......沒有。陰影可以在主區域使用box-shadow完成。你可以使用中心margin: 25px auto;

例http://dabblet.com/gist/2793972

來源

2012-05-26 13:36:00 Ana

垂直增長，是的。水平地，您可以刪除固定寬度，並將px或em或％的值設置爲橫向邊距。 – Ana

我看到[here]（http://stackoverflow.com/questions/7882560/how-do-i-achieve-a-page-over-the-background-effect-with-html-css/7882593#7882593），像-webkit-border-radius，-moz-border-radius這樣的屬性，但是在google上沒有找到匹配。他們需要嗎？ – batman

取決於您希望支持的瀏覽器。 IE9 +，Firefox 4+，Chrome，Safari 5.1+，Opera 10.5+支持前綴版本。有關「box-shadow」瀏覽器支持的詳細表格，請參閱http://caniuse.com/#feat=css-boxshadow和border-radius http://caniuse.com/#feat=border-radius // **編輯**他們不屬性。它們只是前綴的屬性名稱。 – Ana

開發者工具（IE和Chrome中的F12）是一件了不起的事情。

舉例來說，如果你試圖使用他們，你會看到身體有：

margin: 2em 3% 10em; 
box-shadow: 0px 0.3em 1em #000;

而且該html元素有：

background-color: rgb(220, 227, 230);

而且，彷彿被施了魔法，有一個「藍色」的背景和對主要內容的影子。驚人。

來源

2012-05-26 13:05:57

有沒有在Mozilla Firefox類似的東西的主要領域？ – batman

是的，它被稱爲Firebug https://getfirebug.com/downloads/ – Ana

如何在HTML/CSS中爲頁面製作中央背景？

回答

相關問題