Heim >Web-Frontend >HTML-Tutorial >div+css想要文字在图片上，图片大小固定_html/css_WEB-ITnose
div+css想要文字在图片上，图片大小固定_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:581341Durchsuche
css：
.p1{z-index: 1;width: 20;border-top: 5;border-right: 5;border-left: 5;border-bottom: 10;border-color: black}
.p2{font-family: 时尚中黑简体;font-size: 30pt;color: gray;z-index: 2}
html：
sdafdsafdsa
得到效果：
如图，文字并没有在图片上面而且图片也不像css里设定的那样有边框，变大，求问为什么？
回复讨论(解决方案)
重发遍图
想要文字在图片上层
要么 P2绝对定位
要么把图片换成p1的背景图都能满足。
而且你的div没有宽高，所以没有边框。
外层加一个div
.p{
position: relative
}
.p2 {
position:absolute
// 设top,left
}
<div class="p"><div class="p1"><img src="p1.jpg" alt="div+css想要文字在图片上，图片大小固定_html/css_WEB-ITnose" ></div><div class="p2">sdafdsafdsa</div></div>
可以用相对定位和绝对定位来解决。而且的的border也没有加单位px，下面是修改后的，希望对你有帮助：
<html><head><title></title><link rel=stylesheet type="text/css" href="1.css"><style>.p1{z-index: 1;width:300px;height:200px;border:5px solid black;position:relative;}.p1 img{width:250px;height:180px;}.p2{font-family: 时尚中黑简体;font-size: 30px;color: gray;z-index: 2;position:absolute;left:30px;top:50px;}</style></head><body> <div class="p1"><img src="p1.jpg" alt="div+css想要文字在图片上，图片大小固定_html/css_WEB-ITnose" > <div class="p2">sdafdsafdsa</div> </div></body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5样式和列表、CSS链接的四种状态_html/css_WEB-ITnoseNächster Artikel：HTML中em与b等的区别_html/css_WEB-ITnose