如何在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？

回答

相关问题