把图像和H1的比其他图像

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的-image：

检查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

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

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