文字浮在图片上方

文字浮在图片上方普遍使用的有2种方法

方法一:将图片设为div的背景

HTML代码:

1 <div style=" 200px;height: 50px;background: url('1.png');background-repeat: repeat;margin: 0 auto;">
2     <p>文字浮在图片上方</p>
3 </div>

效果图:

方法二:利用图层方法

HTML代码:

1 <div style=" 200px;height: 50px;margin: 0 auto;position: relative;z-index: 1;">
2     <img src="1.png" style=" 200px;height: 50px">
3     <p style="position: absolute;z-index: 2;left: 0;top: 0;">文字浮在图片上方</p>
4 </div>

效果图:

-----------------

代码中的css代码粗糙,未加修饰!

原文地址:https://www.cnblogs.com/gwcyulong/p/6249855.html