div+css想要文字在图片上,图片大小固定_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:32:58
Original
1312 Leute haben es durchsucht

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:







div+css想要文字在图片上,图片大小固定_html/css_WEB-ITnose

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>
Nach dem Login kopieren

可以用相对定位和绝对定位来解决。而且的的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>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage