Question

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

正如你所看到的，我的h1位于我希望它放置的图像之上/之上。我也有一个我想要的图像。

我的div有问题吗？我假设，因为崇高的文本图像与文本覆盖图像的div相同？

可能令人困惑的一个注意事项是我的sublimetext图像被称为Codeythecoder.png

感谢任何帮助，谢谢：）

style.css.scss doucment：

$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 CODE：

<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

请看下面的链接。您需要使用定位和填充来执行接受的答案中描述的内容。

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

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

上传图片

Answer 4

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

Css代码：

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

检查this fiddle

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

4 个答案: