Home >Web Front-end >HTML Tutorial >div+css想要文字在图片上，图片大小固定_html/css_WEB-ITnose
div+css想要文字在图片上，图片大小固定_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:581344browse
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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5样式和列表、CSS链接的四种状态_html/css_WEB-ITnoseNext article：HTML中em与b等的区别_html/css_WEB-ITnose