文字浮在图片上方

Posted 2020-08-26 嘴里坚持着逞强，眼里的泪在投降

文字浮在图片上方普遍使用的有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代码粗糙，未加修饰！