将图像和 h1 放在其他图像上

Question

我正在尝试在 sublime text 空白文档上放置文本和图像（请查看链接：http://ancient-badlands-4040.herokuapp.com/）

如您所见，我的 h1 在我希望它覆盖的图像上方/顶部。我也有一张我想要的图片。

我的 div 有问题吗？我假设由于崇高的文本图像与文本将覆盖图像在同一个 div 中？

可能会让人感到困惑的一点是，我的 sublimetext 图像被称为 Codeythecoder.png

任何帮助将不胜感激，谢谢:)

style.css.scss 文档：

$navbarLinkColor: #90fce8;
$navbarBackground: #ff3600;
$navbarBackgroundHighlight: #ff3600;
$navbarText: Archivo Black, sans-serif;
@import url(http://fonts.googleapis.com/css?family=Archivo+Black);


@import 'bootstrap';

body {
    padding-top: 150px;
    background: url('escheresque_@2X.png');
}

.banner {
    background: url('CDRedBG.png');
    height: 550px;
    margin: 0 auto;
    color: #fff;
}

.row {
    margin-left: -30px;
}

@import 'bootstrap-responsive';



.navbar-inner {
    @include box-shadow(none !important);
    border: 0;
    width: 100%%;
    margin: auto;
}

header {
  width: 100%;
  text-align: center;
  background: transparent;
  display:block;
  overflow: hidden;

}
ul {
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  li{
    display: inline-block;
  }
}

.logo{
  font-size: 30px;
  vertical-align: middle;
  margin: 0 40px;
}

.second {
  .nav-left{
    float: left;
  }
  ul{
    padding: 30px 0;
  }
  .nav-right{
    float: right;
  }
  .logo{
    padding: 200px 0;
    display: inline-block;
  }
}

.featurette-image.pull-right {
margin-left: 40px;
}

.featurette {
padding-top: 120px;
overflow: hidden;
}

.marketing h2 {
font-weight: normal;
}

.muted {
color: #999999;
}

.featurette-divider {
margin: 80px 0;
}

.container {
width: 1170px;
}

.lead {
margin-bottom: 20px;
font-size: 21px;
font-weight: 200;
line-height: 30px;
}

html.erb 文件：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner ">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <header class="top"

      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li><a>CODEY</a></li>
          <li> <a>CODEY</a></li>
        </ul>
        <span class="logo"><%= image_tag 'ctclogojagged3.png', alt: 'logo' %></span>

        <ul class="nav pull-left">
          <li><%= link_to "HOME", root_path %></li>
          <li><%= link_to "ABOUT", about_path %></li>
          <li><a>CODEY</a></li>
          </ul>




        </div><!--/.nav-collapse -->
      </div>
    </div>

  </div>
   <div class='banner'>
      <div class="container">
          <div class="row">
            <h1> I would like text and a pie graph to show over this sublime text backdrop </h1>

            <%= image_tag 'Codeythecoder.png' %>
          </div>
      </div>
    </div>


</header>

Answer 1

将 h1 和饼图绝对定位并设置它们各自的顶部、左侧位置

CSS

.banner .container .row {
    position:relative; //Needed so that child elements using position
                       //will have have their coordinates relative to the parent 
                       //and not the page.
}

.banner .container .row h1 {
    position:absolute;
    top:30px;
    left:30px;
}

#pieChartID {
    position:absolute;
    top:140px;
    left:130px;
}

当然还有fiddle

Answer 2

您可以将您的图像作为 div 的背景图像：

查看this fiddle

HTML 代码：

<div id="main">
  <h1>Your title</h1>    
</div>

CSS 代码：

html,body{
  height:100%;  
}

#main{
  background-image:url('http://ancient-badlands-4040.herokuapp.com/assets/Codeythecoder-72c5e9659bf2c12819ece72fa6a79606.png');
  height:100%;
}

h1{
  color:white;
}

Answer 3

您也可以使用 z-index 属性。

CSS代码：

.main img {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
}

查看this fiddle

Answer 4

请看下面的链接。您需要使用定位和填充执行类似于已接受答案中描述的操作。

How do I position one image on top of another in HTML?

也许更简单的解决方案是使用图像编辑器创建您想要的带有文本和所有内容的图片，然后使用<img src="URL" /> 上传该图片