如何在html/css中居中并填充main

我正在尝试创建一个如下所示的网站：https://i.stack.imgur.com/9YHAs.jpg标头正在工作，但我无法使"main"工作，并尝试了几个选项。我尝试将png作为图像背景浮动到中心，还尝试了显示：内联块和背景颜色：白色。我的代码如下：

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');
    }

有人能找到解决方案吗？

这是一个如何做到这一点的基本示例：

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，但这会使main中的所有都是半透明的。当您想要transparencyhtml背景时，请使用rgba。rgba中50%透明白色：background-color:rgba(255,255,255,0.5)

使用background: rgba(255,255,255,x);，其中"a"表示alpha（透明度），"x"是介于0和1之间的值，如：background: rgba(255,255,255,0.5); 50%透明。这会影响背景，如果您希望内容透明，也可以在.main上使用opacity: x;。

编辑：具有响应宽度和高度的新fiddle和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>

您也可以将.contain设置为height: 100vh; /* vh: Viewport Height */，但我不确定是否所有浏览器都支持它。

相关内容

最新更新

热门标签：