HTML에서 그림 표면에 텍스트를 넣는 방법-프런트엔드 Q&A-php.cn

HTML에서 그림 표면에 텍스트를 넣는 방법

青灯夜游

풀어 주다： 2023-01-03 09:24:18

원래의

33028명이 탐색했습니다.

HTML에서 이미지 표면에 텍스트를 배치하는 방법: 1. "Background-image"를 사용하여 배경 이미지를 정의하고, 2. "img"를 사용하여 이미지를 정의한 다음 img 블록과 텍스트 블록을 동일한 div를 사용하여 절대 위치 지정을 사용하고 상대 위치 지정을 사용하여 그림과 텍스트의 위치를 설정할 수 있습니다.

HTML에서 그림 표면에 텍스트를 넣는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

방법 1: 이미지를 배경 이미지로 사용합니다. 즉, background-image:url("....");

여기에서 배경 이미지의 가로 및 세로 타일링을 제어할 수 있습니다.

Background-repeat : 없음; 타일링 없음
Background-repeat : X축 타일링
Background-repeat : y축 타일링
background-repeat : 반복; 블록과 텍스트 블록을 동일한 div에 배치한 다음 둘 사이의 위치를 설정합니다.

예를 들어 다음 코드 블록은

<!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>

로그인 후 복사

나머지 위치는 다음에 따라 미세 조정할 수 있습니다. 실제 상황에~~

예:

<div style="position:relative;">
　　<img  src="...." / alt="HTML에서 그림 표면에 텍스트를 넣는 방법" >
　　<div style="position:absolute; z-index:2; left:10px; top:10px">
　　　　haha
　　</div>
</div>

로그인 후 복사

HTML에서 그림 표면에 텍스트를 넣는 방법