Question

问题特别是图片的可见性，当你进入网站时，部分图片隐藏在标题下，有些部分隐藏得更高（不知道为什么？）。

你能帮我把标题放在标题下并使标题透明（或部分透明），这样整个画面就会显示在网站上。

这是我的代码： 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;
}

Answer 1

也许这有帮助。使用opacity使元素透明或使用rgba color values显示透明背景颜色。

＆＃13;

html {
height: 100%;
background: url('http://placehold.it/800x800?text=example_image') 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;
  vertical-align: top;
  color: white;
  padding-bottom: 20px;
  background: rgba(0, 80, 255, .5); //transparency here
}

#center {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

#center form {
  margin: 0 auto;
  background: rgba(0, 255, 246, .5); //transparency here
}

footer {
  background: rgba(88, 114, 51, .5); //transparency here
}

＆＃13;

<div id="center">
  <header>Header</header>
  <form>form</form>
  <footer>Footer</footer>
</div>

＆＃13;

Answer 2

要在标题下显示图片，您可以尝试使用Alpha通道添加不透明度或颜色。

您可以尝试将此添加到标题中。

  Opacity: 0.7;

不透明度从1变为0，其中0表示完全透明。不透明度会影响标题内的所有内容，如文本和图像，因此您要查找的更多是关于Alpha通道（RGBA =红色，绿色，蓝色和alpha）。要添加它，您需要添加类似的内容：

 Background-color: RGBA(0,0,0,0.5);

要了解有关rgba颜色的更多信息：

http://www.w3schools.com/cssref/css_colors_legal.asp

https://color.adobe.com/

Answer 3

您可以使用background: rgba()提供良好的透明效果（这并不会使文字像opacity那样透明）。我在下面提供了一个片段。我用于布局的其他一些技巧跨越了多个属性，或者它们只是不直观，所以我使用注释来希望更好地解释我的意图。

我建议尽可能多地使用单类选择器（并改变HTML以允许它）。它使整体事情变得更容易。我的代码也反映了这些变化。

＆＃13;

/* 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);
}

＆＃13;

<header class="site-header">header</header>
<div class="main-content">content</div>
<footer class="site-footer">footer</footer>

＆＃13;

将图片放在标题下

3 个答案: