php设置文字浮于图片上方,html怎么让文字在图片表面

html让文字在图片表面的方法：1、使用“background-image”定义背景图片，2、使用“img”定义图片，将img块与文字块放在同一div中；然后通过position属性，利用绝对定位和相对定位来设置图片和文字的位置即可。

本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

方法1：将 image 作为背景图片，即：background-image:url(".......");

在此可以控制背景图片的横向和纵向的平铺：background-repeat : none;　　不进行平铺

background-repeat : repeat-x;　　横向x轴进行平铺

background-repeat : repeat-y;　　横向y轴进行平铺

background-repeat : repeat;　　横向x轴与纵向y轴都进行平铺，这也是默认情况的状态

示例：

div{

width: 100%;

height: 500px;

background-image:url(demo/img/5.jpg);

background-size:100%;

background-repeat:no-repeat;

color: red;

font-size: 20px;

}

hello!

效果图：

方法2：将img块与文字块放在同一个div 中，然后设置他们之间的位置

例如如下代码块：

　　

haha

其余的位置再根据实际情况进行微调就好~~

示例：

div{

width: 100%;

color: red;

font-size: 20px;

}

　　

haha

关于position中relative 以及 absolute 属性值的区别：

position：absolute这个是绝对定位；是相对于浏览器的定位。

比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：

当1固定了位置。1的样式float:left;width:100px; height:800px;

2的样式为float:left; position：relative；margin-left:20px;width:50px;

2的位置在1的右边，距离120px

更多编程相关知识，请访问：编程视频！！