如何在边框内添加文字？

I am trying to get my text within my border that I added as an image. I will be adding more text and would like it to show up in my border as I am writing it. Any help would be appreciated. Thanks!

我试图在我的边框中获取我作为图像添加的文本。我将添加更多文本,并希望它在我写作时显示在我的边框中。任何帮助,将不胜感激。谢谢!

li {
  list-style-type: none;
  display: inline-block;
  font-size: 20px;
  letter-spacing: 4px;
  width: 150px;
}
.main-nav a {
  text-decoration: none;
}
.main-nav {
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}
a:link {
  color: #008B00;
}
a:visited {
  color: #008B00;
}
p {
  font-size: 20px;
}
#main-border {
  text-align: center;
}
.searchbutton {
  font-size: 20px;
}

<div id="main-border">
  <p>Hi! My name is Marika and I am excited to join the school soon!</p>
  <img src="../desktop/background.gif" alt "border" height="500px" width="550px">
</div>

4 个解决方案

#1

I could not understand your question but i think this is what you are looking for :

我无法理解你的问题,但我认为这正是你要找的:

<div id="main-border">      
  <p>Hi! My name is Marika and I am excited to join the school soon!</p>    
</div>

#main-border {
   text-align: center;
   background : url(../desktop/background.gif);
   background-size : 100% 100%;
   min-height : 500px;
   min-width : 500px;
}

#2

like this? obviously style to your liking

像这样?显然你的喜好风格

var place=document.getElementById('txtplace');
function add_text(txt){
  place.innerHTML=txt;
  }

#txtplace{background-color:grey;opacity:0.8;font-size:150%;position:absolute;top:100px;left:50px;}

<input type="text" id="text_to_add" onkeyup="add_text(this.value);"/>
<span id="txtplace"></span>
                       <img src="http://lorempixel.com/600/600" id="background">

#3

I believe this is what you're looking to achieve (although, instead of a picture of a kitten, your image)

我相信这是你想要实现的目标(尽管,而不是小猫的照片,你的形象)

.THIS {
  background-image: url(http://placekitten.com/g/500/500);
  background-repeat: no-repeat;
height:500px;
  width:500px;
}

<div id="main-border">
  <p class="THIS">Hi! My name is Marika and I am excited to join the school soon!</p>

</div>

#4

Late answer but if you are trying to add text in the border you can absolute position it and do it like this http://jsfiddle.net/vo7jzz4m/

迟到的答案,但如果你试图在边框中添加文字,你可以绝对定位它,并像这样做http://jsfiddle.net/vo7jzz4m/

div{
width:250px;
height:250px;
background:url('http://placekitten.com/300/301') no-repeat;
background-size:cover;

border:10px solid transparent;
outline:1px solid green;
}

div:before{
top:0px;
position:absolute;
content:"aA";
}

#1