• 技术文章 >web前端 >前端问答

    html怎么让文字在图片表面

    青灯夜游青灯夜游2021-02-22 11:36:40原创124

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

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

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

    在此可以控制背景图片的横向和纵向的平铺:

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			div{
    				width: 100%;
    				height: 500px;
    				background-image:url(demo/img/5.jpg);
    				background-size:100%;
    				background-repeat:no-repeat;
    				
    				color: red;
    				font-size: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			hello!
    		</div>
    	</body>
    </html>

    效果图:

    1.png

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

    例如如下代码块:

    <div style="position:relative;">
      <img src="...." />
      <div style="position:absolute; z-index:2; left:10px; top:10px">
        haha
      </div>
    </div>

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

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			div{
    				width: 100%;
    				color: red;
    				font-size: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div style="position:relative;">
    		  <img src="demo/img/5.jpg" width="500"/>
    		  <div style="position:absolute; z-index:2; left:10px; top:10px">
    		    haha
    		  </div>
    		</div>
    	</body>
    </html>

    2.png

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

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

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

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

    比如:<div class="1"></div><div class="2"></div>

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

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

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

    更多编程相关知识,请访问:编程视频!!

    以上就是html怎么让文字在图片表面的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:html css 文字 图片
    上一篇:margin-top在html中的意思是什么 下一篇:html img图片怎么设置透明度
    第15期线上培训班

    相关文章推荐

    • css中怎么将div居中显示图片• css外联和内联嵌入区别• myeclipse怎么用css• css id选择器怎么写

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网