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

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

青灯夜游

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

원래의

33350명이 탐색했습니다.

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="/static/imghw/default1.png"  data-src="...."  class="lazy"   / alt="HTML에서 그림 표면에 텍스트를 넣는 방법" >
　　<div style="position:absolute; z-index:2; left:10px; top:10px">
　　　　haha
　　</div>
</div>