1

我正在尝试在崇高的文本空白文档上放置文本和图像（请查看链接：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>
4

4 回答 4

3

将 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;
}

当然还有小提琴

于 2013-07-01T18:20:52.973 回答
1

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

检查这个小提琴

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;
}
于 2013-07-01T18:18:34.600 回答
0

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

如何在 HTML 中将一张图片放在另一张图片之上？

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

于 2013-07-01T18:22:43.080 回答
0

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

CSS代码：

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

检查这个小提琴

于 2013-07-01T19:08:45.017 回答