在标题

时间:2017-06-09 10:37:55

标签: html css

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

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

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

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



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

}

<header>
    <div class="background-img">
        <h2> Random title</h2>
    </div>
    
</header>
&#13;
&#13;
&#13;

我遇到的问题:

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

6 个答案:

答案 0 :(得分:0)

更新以下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;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

您可以尝试进行垂直对齐(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属性opacityFiddle Here):

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

答案 2 :(得分:0)

我使用了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>

答案 3 :(得分:0)

抱歉,但我没有收到问题,但我看到你想要制作“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>

答案 4 :(得分:0)

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

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

</header>

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

答案 5 :(得分:0)

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

click on a color item

change the color code and click on the marked arrows

get the rgba-color code