如何在页面中间的图像(homepagepic.jpg)上叠加一段文字。 我想在图像上写一堆文字,我做了很多研究,但实际上并没有太多的问题。非常感谢提前
HTML:
<center>
<h1>Welcome To The Kingston University Survey Page</h1>
</center>
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
<br/>
<div id="buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
<a href="http://www.w3schools.com/html/">LogIn</a>
</div>
<br/><br/><br/><br/><br/><br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img class="social-badge" src="facebookpic.png" alt="facebook logo" onclick="window.location.href='http://www.facebook.com'">
<img class="social-badge" src="twitterpic.jpg" alt="twitter logo" onclick="window.location.href='http://www.twitter.com'">
</div>
CSS:
h1 {
margin:0px;
padding:0px;
}
body {
background-color: #A9D0F5;
}
#middlepic {
display: block; margin: 0 auto;
}
#uni {
display: block; width: 200px; height: 175px; float:left;
}
#footer {
width: 100%; height:100px; display: inline-block; text-align: center;
}
#buttons {
display: block;
margin: 0 auto;
width: 50%;
}
button {
height: 30px;
width: 200px;
background-color: #ccc;
border-radius: 10px;
}
a {
text-decoration: none; color: #000;
}
.social-badge {
width: 40px;
}
答案 0 :(得分:1)
为什么不制作新的div并将homepagepic.jpg作为其背景,然后写入该div。
<div id="written">
This text is over the image
</div>
和CSS
#written
{
background-image : url(***** here comes the url of image homepagepic.jpg*****);
}
答案 1 :(得分:0)
使用CSS
background-image: url('kingstonunilogo.jpg');
答案 2 :(得分:0)
语义方法是使用绝对定位figure
的{{1}}元素。
这样的事情:
figcaption
figure { position: relative; }
figcaption {
position: absolute;
top: 0; left; 0;
}
答案 3 :(得分:0)
如果您不想使用background-image
使用position:absolute
作为段落http://jsfiddle.net/8cup75k3/
p{
width:500px;
position:absolute;
margin-top:-100px;
color:green;
}