特别是图片的可见性问题，当你进入网站时，部分图片隐藏在标题下方，部分隐藏得更高(不知道为什么？)。
你能帮我把图片放在标题下，并使标题透明(或部分透明)，这样网站上就会显示完整的图片吗。
这是我的代码: HTML:`
<html lang="ru">
<head>...</head>
<body>
<header>...</header>
<div id="center">
<form>....</form>
</div>
<footer> </footer>
</body>
</html>`
CSS:
html {
height: 100%;
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0px;
font-family: sans-serif;
color: white;
width: 100%;
height: 100%;
}
header {
height: 60px;
display: inline-block;
vertical-align: top;
color: white;
width: 100%;
padding-bottom: 20px;
}
最佳答案
您可以使用 background: rgba() 来提供良好的透明效果(这不会像 opacity 那样使文本透明)。我在下面提供了一个片段。我用于布局的其他一些技巧跨越多个属性，或者它们只是不直观，所以我使用注释来希望更好地解释我的意图。
我建议尽可能多地使用单类选择器(并更改 HTML 以允许它)。它使事情变得更容易。我下面的代码也反射(reflect)了这些变化。
/* Background & General Styles */
* {
box-sizing: border-box; /* Prevent padding (and borders) from adding to width/height */
}
html, body {
margin: 0px; /* Remove browser default margins */
padding: 0px; /* Remove browser default padding */
}
html {
height: 100%; /* Helps min-height work properly on body */
}
body {
position: relative; /* Assist "position: absolute" below */
padding-top: 60px; /* Must match header height; make up for header being removed from the document flow */
padding-bottom: 60px; /* Must match footer height; make up for footer being removed from the document flow */
min-height: 100%; /* Force body to be at least the size of the screen */
background: grey; /* Backup color */
background: url(http://i.stack.imgur.com/OVOg3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: sans-serif;
color: white;
}
/* Header */
.site-header {
position: fixed; /* Helps us position at the top; header no longer takes up space in the flow of the document */
top: 0px;
width: 100%;
height: 60px;
padding: 15px;
background: rgb(44, 44, 44); /* Backup color */
background: rgba(44, 44, 44, 0.5);
}
/* Main Content */
.main-content {
padding: 15px;
}
/* Footer */
.site-footer {
position: absolute; /* Helps us position at the bottom; footer no longer takes up space in the flow of the document */
bottom: 0px;
width: 100%;
height: 60px;
padding: 15px;
background: rgb(44, 44, 44); /* Backup color */
background: rgba(44, 44, 44, 0.5);
}<header class="site-header">header</header>
<div class="main-content">content</div>
<footer class="site-footer">footer</footer>关于html - 将图片放在标题下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37398235/