Question

我是HTML / CSS的新手，我在暑假期间开始一个项目来学习更多的网络编程。该网站主要包含我使用/需要快速访问的信息。所以考虑包括所有学校，工作等相关内容的链接。

我刚开始很抱歉，如果这对你们来说是微不足道的话！我试图找到我遇到的问题的解决方案，但没有真正找到解决方案。

我想到的标题有这样的结构： Example

我已经修好了导航栏，但我一直遇到标题部分的问题。这是我现在的代码：https://jsfiddle.net/pefypr7v/2/

＆＃13;

html,body { 
  margin: 0;
}

html {
  background: #FFF;
  font-family: Helvetica,Arial,sans-serif;
}
header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}

header > *:not(.background-img) {
  z-index: 5;
  position: relative;
}

.background-img > h2 {
    margin-top:0; 
    margin-bottom: 0;
    background-color: grey;
}

.background-img {
  background-image: url('http://i.imgur.com/N6l22Aq.jpg');
  background-size: cover;
  background-position: bottom center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;

}

＆＃13;

<header>
    <div class="background-img">
        <h2> Random title</h2>
    </div>
    
</header>

＆＃13;

我遇到的问题：

灰色文字背景只覆盖文字而且有点透明（用颜色代码[即FFFFFF]和透明度而不是rgba（x，x，x，x）选择颜色的任何方式？）
标题在中间垂直对齐

Answer 1

更新以下css部分

工作小提琴

<强> fiddle code

.background-img>h2 {
  margin-top: 0;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

＆＃13;

html,
body {
  margin: 0;
}

html {
  background: #FFF;
  font-family: Helvetica, Arial, sans-serif;
}

header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}

header>*:not(.background-img) {
  z-index: 5;
  position: relative;
}

.background-img>h2 {
  margin-top: 0;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

.background-img {
  background-image: url('http://i.imgur.com/N6l22Aq.jpg');
  background-size: cover;
  background-position: bottom center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

＆＃13;

<header>
  <div class="background-img">
    <h2> Random title</h2>
  </div>

</header>

＆＃13;

Answer 2

您可以尝试进行垂直对齐（Fiddle here）：

html,body { 
  margin: 0;
}

html {
  background: #FFF;
  font-family: Helvetica,Arial,sans-serif;
}
header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}

header > *:not(.background-img) {
  z-index: 5;
  position: relative;
}

.background-img > h2 {
    margin-top:0;
    margin-bottom: 0;
    background-color: white;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
}

.background-img {
  background-image: url('http://i.imgur.com/N6l22Aq.jpg');
  background-size: cover;
  background-position: bottom center;
  position: relative
  z-index: 1;
  width: 100%;
  height: 100%;

}

对于不透明度，您可以使用十六进制代码并使用CSS属性opacity（Fiddle Here）：

.myclass{
    opacity: 0.5;
    background-color: #341234;
}

Answer 3

我使用了Lokesh Gupta的答案，因为它只缺少垂直对齐。您可以通过以下方式实现此目的：

.background-img > h2 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

html,
body {
  margin: 0;
}

html {
  background: #FFF;
  font-family: Helvetica, Arial, sans-serif;
}

header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}

header>*:not(.background-img) {
  z-index: 5;
  position: relative;
}

.background-img {
  text-align: center;
}

.background-img > h2 {
  margin-top: 0;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.background-img {
  background-image: url('http://i.imgur.com/N6l22Aq.jpg');
  background-size: cover;
  background-position: bottom center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

<header>
  <div class="background-img">
    <h2> Random title</h2>
  </div>
</header>

Answer 4

抱歉，但我没有收到问题，但我看到你想要制作“https://i.stack.imgur.com/BVcLx.png”的图像，所以制作这种类型的HTML。希望它对你有用。

html,body { 
  margin: 0;
}

html {
  background: #FFF;
  font-family: Helvetica,Arial,sans-serif;
}
.warrper {border:1px solid #000; width:100%; height:auto; float:left; margin:0px; padding:20px 0px;
}
header {
 width: 100%;  height: auto; overflow: hidden; position: relative; text-transform: uppercase;  background: url('http://i.imgur.com/N6l22Aq.jpg') repeat left top;
 }
 /*IF YOU WANT BACKGROUND COLOR BEHIND OF HEADER TITLE THAN USE THIS CLASS*/
header h2 {background:rgba(0, 0, 0, 0.8); font-size:24px; color:#fff; float:left; padding:10px 20px;
} 
 
nav {border:1px solid #000; width:100%; height:auto; float:left; margin:0px; padding:20px 0px}
nav ul {width:100%; height:auto; margin:0px; padding:0px;}
nav ul li {float:left; margin:0px; padding:0px;list-style-type:none;}
nav ul li a {margin:0px; padding:10px 20px; font-size:17px; color:#000; text-decoration:none;}

<div class="warrper">
<header>
  <h2> Random title</h2>
  <nav>
      <ul>
        <li><a href="#" titile="Home">Home</a></li>
        <li><a href="#" titile="Home">About us</a></li>
        <li><a href="#" titile="Home">Services</a></li>
        <li><a href="#" titile="Home">Contact us</a></li>
      </ul>
   </nav> 
</header>
</div>

Answer 5

删除标题标记并制作自定义样式像

<header>
    <div class="background-img">
         Random title
    </div>

</header>

https://jsfiddle.net/anandnaha/znwc5s6f/

Answer 6

为了便于翻译您的十六进制代码，您可以使用chrome-dev-tools，如图所示：

在标题

6 个答案: