如何在html/css中居中並填充main？

-1

我試圖創建一個網站，看起來如下：http://i.stack.imgur.com/9YHAs.jpg 標題工作，但我不能讓「主」工作，並嘗試了幾個選項。我試圖漂浮一個PNG作爲圖像背景中心，並嘗試與顯示：內聯塊和背景顏色：白色。我的代碼如下：如何在html/css中居中並填充main？

HTML: <!DOCTYPE html> 
    <html> 
     <head> 
      <title>Home - Portfolio Daniek</title> 
      <link rel="stylesheet" type="text/css" href="normalize.css"> 
      <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
      <script src="menutoggle.js"></script> 
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     </head> 
     <body class="index"> 
      <nav class="clearfix"> 
       <ul class="clearfix"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="about.html">Over</a></li> 
        <li><a href="portfolio.html">Portfolio</a></li> 
        <li><a href="contact.html">Contact</a></li> 
       </ul> 
      <a href="#" id="pull">Menu</a> 
     </nav> 
     <main class="bg"> 
      <p>Hi</p> 
     </main> 
     </body> 
CSS: 
    .bg { 
     margin-top: 10%; 
     margin-left: auto; 
     margin-right: auto; 
     width: 90%; 
     height: 90%; 
     color: white; 
     background-image: url('bg.png'); 
    }

任何人有任何解決方案，如何得到這個工作？

來源

2014-10-20 Daniek Schuiling

請發佈**完整**代碼示例。 – j08691 2014-10-20 17:21:03

請點擊此鏈接http://jsfiddle.net/orahkd80/ – Carca 2014-10-20 17:26:39

使用'rgb'背景與'opacity'例如rgba（224,234,241,0.69）'0.69'是'opacity' – 2014-10-20 17:30:57

這是一個會怎麼做這一個基本的例子：

body{background:url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg') no-repeat; background-size:100%; margin:0; overflow:hidden} 
 
header{height:80px;width:100%; background:grey} 
 
#main{width:90%; height:90%; position:absolute; background:rgba(255,255,255,0.5); margin:5%;}

<body><header></header><div id="main"></div></body>

點擊「整頁」選項，看看它是什麼樣子

在你的榜樣，你正在使用background-color:white，你可以使用opacity:0.5，但這會使的所有內容都變成主要半透明的。當你想透明背景使用rgba。 rgba中50％透明度白色：background-color:rgba(255,255,255,0.5)

來源

2014-10-20 17:34:53 DividedByZero

使用background: rgba(255,255,255,x);其中「a」代表alpha（透明度），「x」代表0和1之間的值，如：background: rgba(255,255,255,0.5); 50％透明。這會影響背景，如果您希望內容透明，請使用opacity: x;.main。

編輯：新小提琴和CSS與響應寬度和高度

在這裏看到：http://jsfiddle.net/km0mz63q/3/

您需要的欽傑與height: 100%填滿整個文檔響應高度和「推進器」元素與min-height: 100%;。在我的例子中，.container將頁腳推到頁面的底部。 .container上的負邊距很重要，必須等於頁腳高度，它允許頁腳與「推動器」重疊（.container）。請注意，頁腳需要位於推杆元件的外部才能工作。

html,body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
header{ 
    height: 60px; 
    padding: 10px; 
    width: 100%; 
    background: rgba(255,255,255,0.5); 
    margin-bottom: 20px; 
} 
.container{ 
    background: url("http://www.world-finance-conference.com/sites/default/files/new-york-city-wallpaper.jpg") center center; 
    width: 100%; 
    min-height: 100%; /* Set the container min height to 100% */ 

    margin-bottom: -100px; /* !IMPORTANT - Must be equal to the footer height */ 

} 
.container:after{ 
    content: ""; 
    display: block; 
    height: 100px; 
} 
.main{ 
    width: 90%; /* change this for your desired width */ 
    padding: 20px; 
    margin: auto; 
    margin-bottom: 40px; 
    background: rgba(255,255,255,0.5); /* rgba(): rgb is the color (red, green, blue) and the "a" is for alpha (transparency) */ 
    height: 400px; /* change this for your custom height */ 
} 
footer{ 
    height: 100px; 
    padding: 10px; 
    width: 100%; 
    background: rgba(255,255,255,0.5); 
}

也改變了HTML：

<div class="container"> 
    <header>This is header</header> 
    <div class="main">This is main</div> 
</div> 
<footer> 
    This is footer 
</footer>

您還可以設置.container到height: 100vh; /* vh: Viewport Height */，但我不知道這是否是所有瀏覽器都支持。

來源

2014-10-20 17:43:42 Berthy

該解決方案几乎可行，但是屏幕沒有完全填充，頁腳下方有一個黑色條。你有任何解決方案？嘗試更改像素的百分比，但這並不能解決問題。 – 2014-10-20 18:08:01

你想用透明元素或背景圖像填充整個屏幕？＆我的腳下沒有看到任何黑色欄。你可以提出一個問題的小提琴，它會更容易幫助你。 – Berthy 2014-10-20 18:26:03

我剛剛從你的小提琴中複製了代碼，但我有一個打印屏幕：http://i.imgur.com/ccsDAT6.jpg它是關於頁腳和屏幕底部之間的白色條。你知道我怎樣才能使整個頁面更「響應」，所以它會自動調整到我/任何分辨率？試圖玩弄百分比，但這並沒有解決它。 – 2014-10-20 18:53:55

如何在html/css中居中並填充main？

回答

相關問題