文字浮在图片上方

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

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

HTML代码：

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

效果图：

 

方法二：利用图层方法

HTML代码：

1 <div style="width: 200px;height: 50px;margin: 0 auto;position: relative;z-index: 1;">
2     <img src="1.png" style="width: 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