Question

我正在尝试创建一个如下网站：http://i.stack.imgur.com/9YHAs.jpg 标题正在工作，但我无法得到＆＃34; main＆＃34;工作并尝试了几种选择。我试图将png作为图像背景浮动到中心，并尝试使用display：inline-block和background-color：white。我的代码如下：

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

任何人都有任何解决方案如何让它发挥作用？

Answer 1

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

＆＃13;

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%;}

＆＃13;

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

＆＃13;

＆＃13; 点击＆＃34;整页＆＃34;用于查看其外观的选项

在您的示例中，您使用的是background-color:white，您可以使用opacity:0.5，但这会使主要半透明的所有内容。当你想要transparencyhtml背景时使用rgba。 rgba中的50％透明度白色：background-color:rgba(255,255,255,0.5)

Answer 2

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

编辑：具有响应宽度和高度的新小提琴和CSS

见这里：http://jsfiddle.net/km0mz63q/3/

对于响应高度，您需要boby用height: 100%和＆＃34; pusher＆＃34;填充整个文档。元素min-height: 100%;。在我的例子中，.container将页脚推到页面底部。 .container上的负边距很重要，必须等于页脚高度，它允许页脚重叠＆＃34;推杆＆＃34; （.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 */，但我不确定所有浏览器是否支持。

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

2 个答案: