Question

我正在尝试将我的文字放在我添加为图像的边框内。我将添加更多文本，并希望它在我写作时显示在我的边框中。任何帮助，将不胜感激。谢谢！

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>

Answer 1

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

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

Answer 2

像这样？显然你喜欢的风格

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">

Answer 3

我相信这是你想要实现的目标（尽管不是小猫的照片，而是你的形象）

.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>

Answer 4

迟到的答案，但如果您尝试在边框中添加文字，则可以绝对定位并按照此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";
}

如何在边框内添加文字？

4 个答案: