집 > 뛰어나다 > 이미지에 html을 쓰는 방법. CSS를 사용하여 이미지 위에 텍스트를 배치합니다. 이미지에 텍스트를 쓰는 방법의 예


이미지에 html을 쓰는 방법. CSS를 사용하여 이미지 위에 텍스트를 배치합니다. 이미지에 텍스트를 쓰는 방법의 예




강의 댓글이나 포럼에서 초보자가 다음과 같이 묻는 경우를 자주 봅니다. “게시물을 게시하고 싶습니다. 이미지 위에 텍스트, 그리고 그것은 그림 아래나 위에 있는 것으로 밝혀졌습니다. 도움말." 작성 방법에 대한 구체적인 예를 살펴보겠습니다. 그림에 있는 텍스트어딘가에.

아래 그림의 각 야채 옆에 이름을 서명해야 합니다. 이 작업은 간단해 보이지만 초보 웹마스터라면 누구나 미치게 만들 수 있습니다.

저는 의도적으로 큰 1280x733 이미지를 예시로 사용하여 이를 다양한 화면 해상도에 적용하는 방법도 보여주었습니다. 데스크톱 해상도에 맞게 레이아웃하는 방법만 배우는 것으로 충분했던 시절은 지나갔습니다. 레이아웃을 만들 때 즉시 적응성을 고려해야 합니다.

HTML 마크업

우선, 야채 그림과 비문을 위한 컨테이너를 만듭니다. 각 비문은 클래스가 다른 별도의 블록에 배치됩니다. 모든 비문은 페이지에 고유한 좌표를 갖고 있고 div에 속성을 작성하여 관리할 것이기 때문에 이는 논리적입니다.



양파

감자

당근

완료 후 HTML- 마크업을 사용하면 그림의 일부와 그림 아래에 나타나는 텍스트만 볼 수 있습니다. 익숙한 사진이죠?

그림이 다소 큰 픽셀로 모두 확장되고 가로 스크롤 막대가 나타납니다. 그러나 다행스럽게도 그림 너비를 100%로 설정하여 적응형으로 만들면 쉽게 수정할 수 있습니다. 적어도 하나의 문제가 해결되었습니다.

이미지(
너비: 100%;
}

이제 텍스트로 넘어 갑시다.

CSS 스타일

컨테이너 스타일에서 주요 속성은 다음과 같습니다. 위치: 상대적. 이를 통해 우리는 규칙을 변경하고 브라우저 창의 왼쪽 상단 모서리가 아닌 컨테이너 모서리에서 좌표를 계산하도록 요청합니다. 컨테이너는 컨테이너에 중첩된 모든 요소의 상위 요소이며 창의 90%를 차지합니다.

컨테이너(
너비: 90%;
위치: 상대;
텍스트 정렬: 중앙;
색상: #000;
글꼴 모음: arial black;
글꼴 크기: 250%;
}

왼쪽(
위치: 절대;
최고: 26%;
왼쪽: 6%;
}

센터(
위치: 절대;
최고: 17%;
왼쪽: 42%;
}

오른쪽(
위치: 절대;
상위: 1%;
오른쪽: 27%;
}

좌표를 픽셀 단위가 아닌 % 단위로 설정합니다. 화면 크기가 줄어들면 텍스트는 수정한 위치에 그대로 유지됩니다. 이는 좋은 소식이지만 나쁜 소식은 텍스트 크기가 이미지와 함께 줄어들지 않는다는 것입니다. 그림 자체는 축소되는데, 텍스트는 강제로 축소해야 합니다.

미디어 쿼리

768픽셀 이하의 해상도에서는 글꼴 크기를 150%로 줄입니다. 768픽셀로 크기를 줄여야 한다는 것을 어떻게 알았나요? 코드 검사기를 통해 텍스트가 인접한 요소로 이동하는 지점을 확인했습니다.

위치:상대적; 오버플로: 숨김;

조명 블록의 일부만 표시하고 불필요한 픽셀을 고르지 않게 제거해야 하는 경우 속성을 사용합니다. 클립: ect(위, 오른쪽, 아래, 왼쪽);위치 없이는 적용할 수 없습니다: 절대. 자동은 측면이 변경되지 않은 상태로 유지됨을 나타냅니다.

위치:상대적;

클립: 각형(자동, 200px, 자동, 30px);

위치와 블록의 상호 작용: 다른 요소와 절대

하나의 블록에 여러 요소를 배치할 수 있습니다. 이해의 편의를 위해 표시하지 않겠습니다.

ㅏ
비

블록 A에 위치: 절대가 할당된 경우 블록 B는 마치 블록 A가 존재하지 않는 것처럼 배치되어 그 자리를 대신하게 됩니다. 블록 A는 마치 블록 위에 떠 있는 것처럼 블록 B의 위치에 더 이상 영향을 미칠 수 없습니다.

ㅏ
비

블록 A는 블록 B와 겹칩니다. 그러나 두 번째 블록이 상대, 절대 또는 고정 값에 위치를 추가하자마자 상황이 변경됩니다.

위치: 절대;

위치: 상대;


위치: 절대;

위치: 절대;


이제 우선순위는 코드에서 더 낮은 곳에 위치한 블록(이 경우 흰색 B)이 됩니다. 자연 순서를 변경하려면 다음을 사용합니다. Z-색인. 이 매개변수의 값이 높을수록 요소가 더 높은 곳에 위치합니다. position: static의 경우 이 속성은 무시되고(속성 제외) IE에는 .

A
B

요소는 값을 지정하지 않으면(또는 값이 동일한 경우) 서로의 위치에 영향을 미칠 수 없으므로 위쪽, 아래쪽, 오른쪽, 왼쪽 및 여백이 서로의 위에 놓입니다. 그리고 고정되지 않은 경우 상위 블록의 높이는 0입니다. 다음을 포함하여 많은 것들이 이 원칙을 기반으로 합니다.

ㅏ
비

너비와 위치: 절대값

너비(또는 높이)는 대부분의 인라인 요소에 적용되지 않습니다. 기본값은 auto이며, 블록 요소의 경우 width: 100%에 해당합니다.

블록
VS 로엔뉴욕

내장


VS 로엔뉴욕

내장


너비: 100%; 둘 다에 대해 이것은 정적이 아닌 다른 위치로 설정된 부모의 너비입니다.

블록
VS 로엔뉴욕

내장


너비를 지정하지 않고 왼쪽과 오른쪽의 반대 값을 지정하면 블록은 이 두 지점 사이의 전체 너비까지 늘어납니다. 그렇지 않으면 오른쪽이 무시됩니다.

블록
VS 로엔뉴욕

내장

이미지에 텍스트를 쓰는 방법의 예입니다.

다음 샘플은 CSS 오버레이 사용의 장점을 보여줍니다.

숲과 들판은 하얗고,
하얀 초원.
눈 덮인 사시나무 근처
뿔 같은 가지.

강한 얼음 아래
강물이 졸고 있습니다.
하얀 눈더미
지붕에 눈이 내렸습니다.

하늘에는 별이 밝게 빛난다
그들은 둥근 춤을 춥니 다.
오래된 해는 작별 인사를합니다 -
새해가 다가오고 있습니다.

E. Trutneva.

시
작가

한 텍스트를 다른 텍스트 위에 겹쳐 놓는 방법의 예입니다.

예
견본

예
견본

HTML에서 이미지 위에 텍스트를 배치하는 방법의 예

이미지에 텍스트를 쓰는 방법이 옵션은 점점 인기를 얻고 있으며 CSS 속성을 사용하여 한 레이어를 다른 레이어에 오버레이함으로써 가능합니다.
표제투명한 영역

일반적으로 질문 자체는 간단합니다. 한 블록을 다른 블록 위에 놓는 데 까다로운 일은 없습니다. 그러나 여전히 이 문제에는 논의할 가치가 있는 몇 가지 사항이 있습니다. 이에 관심을 가지실 분들이 계실 거라 생각합니다.

아이디어는 단순히 이미지에 일부 텍스트를 오버레이하는 것입니다. 텍스트는 가변 길이의 블록으로 표시되며 텍스트 주위가 균일하게 채워져 왼쪽에 위치한다고 가정합니다. 예를 들어 다음 이미지와 같습니다.

문서개요

HTML 마크업

공원 속의 영화:
쿵푸 팬더

물론 div 요소를 사용하여 이미지를 배경으로 표시하는 것이 더 쉬울 수 있지만 이 경우 이미지가 문서의 내용이므로 HTML에 속한다고 가정합니다. div 요소를 텍스트의 절대 위치 지정을 위한 컨테이너로 사용합니다.

CSS

.image ( 위치: 상대; 너비: 100%; /* IE 6의 경우 */ ) h2 ( 위치: 절대; 위쪽: 200px; 왼쪽: 0; 너비: 100%; )

그래서 우리는 이미지 바로 위에 텍스트를 배치했습니다. 다음 작업은 텍스트의 배경을 만드는 것입니다. 요소 이후

블록 요소이므로 이러한 목적으로 사용할 수 없습니다. 인라인 요소를 사용해 봅시다 . 제목 안에 텍스트를 넣어 보겠습니다.

공원 속의 영화:
쿵푸 팬더

이 범위를 사용하여 텍스트와 배경을 장식합니다.

H2 범위( color: 흰색; 글꼴: 굵은 글씨 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* 다음 줄이 작동하지 않는 경우 */ 배경 : rgba(0, 0, 0, 0.7); 패딩: 10px;

문제

그림에서 볼 수 있듯이, 줄 끝에서 텍스트 블록은 줄의 마지막 문자 바로 뒤에서 끝나고 다음 줄의 왼쪽에서 바로 시작됩니다. 이 경우 범위의 패딩 속성은 도움이 되지 않습니다.

문제를 해결하려면 태그 양쪽에 추가 스팬을 사용해야 합니다.
, 이 경우 이미 패딩을 사용할 수 있습니다.

공원 속의 영화:
쿵푸 팬더

패딩 속성을 다음과 같은 새로운 범위로 설정합니다.

H2span.spacer(패딩: 0 5px; )

의미론은 어떻습니까?

이 단계에서 설계는 완료되었지만 한 가지 문제가 남아 있습니다. 즉, 디자인을 위해서만 엄청난 수의 추가 HTML 요소가 추가되었습니다. 내 말은 범위를 의미합니다. 이 문제를 해결하기 위해 jQuery를 사용하겠습니다. 이렇게 하려면 마크업에서 모든 범위를 삭제하고 동적으로 추가합니다.

공원 속의 영화:
쿵푸 팬더

$(function() ( $("h2").wrapInner(" "); $("h2 br").before(" ").후에(" "); });

텍스트 정렬 및 들여쓰기를 결정하는 HTML 태그

타이포그래피에 사용되는 양쪽 맞춤 텍스트

아래 예에서는 정렬 방법을 보여줍니다. 텍스트를 너비로페이지:

정렬="왼쪽" 정렬="오른쪽"

서비스 부문과 정보 보급에 종사하는 근로자의 수가 매일 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면, 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.
정렬="정렬" 정렬="가운데"

서비스 부문과 정보 보급에 종사하는 근로자의 수가 매일 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면, 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.

서비스 부문과 정보 보급에 종사하는 근로자의 수가 매일 증가하고 있습니다. 지난 세기의 상징이 농장과 공장이었다면, 현재 21세기의 상징은 정보 흐름에 접근할 수 있는 컴퓨터를 갖춘 사무실입니다.

정당화 값은 균일성을 보장합니다. 텍스트를 오른쪽과 왼쪽으로 정렬, 그건 폭이. 이 방법은 인쇄에 널리 사용됩니다.

HTML의 텍스트를 가운데와 너비에 맞춰 정렬

HTML의 텍스트를 가운데 정렬하고 텍스트를 오른쪽으로 정렬합니다.:

결과:

속성 및 값

  • align="left" - 정의 왼쪽 텍스트 정렬(기본).
  • 정렬="중앙" - 텍스트를 중앙에 정렬합니다.
  • 정렬="오른쪽" - 텍스트를 오른쪽으로 정렬합니다.

정렬 | HTML 텍스트 들여쓰기

페이지 왼쪽의 HTML 텍스트 및 들여쓰기

우리는 생산할 것입니다 텍스트 들여쓰기두 가지 방법으로 왼쪽에 있습니다.

결과:

새 창에서 보기.

어떤 사람들은 잘못된 방법을 찾습니다. 그들은 그래픽 편집기에서 그림에 텍스트를 그린 다음 HTML 문서에 텍스트와 함께 이미지를 배치합니다. 하지만 텍스트를 바꿔야 한다면 어떻게 될까요? 그림을 다시 그려볼까? 더 간단한 솔루션이 있습니다.

결과적으로 우리는 다음을 얻습니다:

모든 것이 하얀 눈으로 덮여있었습니다. 나무와 집 모두 가벼운 날개 바람이 휘파람을 불었습니다. "안녕하세요, 겨울-겨울!"

제시된 방법의 핵심은 이미지와 텍스트를 포함할 div 컨테이너를 만드는 것입니다. 이 경우 컨테이너의 왼쪽 하단을 기준으로 텍스트를 배치합니다.

HTML 코드:

모든 것이 하얀 눈으로 덮여있었습니다. 나무와 집 모두 가벼운 날개 바람이 휘파람을 불었습니다. "안녕하세요, 겨울-겨울!"

CSS 코드:

.container(디스플레이:인라인 블록; 위치:상대; ) .container div(디스플레이: 인라인 블록; 위치: 절대; 하단: 10px; 왼쪽: 0px; 배경색: rgba(0,0,0,.4) ); 패딩: 5px 5px 5px 10px 색상: 흰색 )
  • display: inline-block - 컨테이너가 전체 페이지 너비에 걸쳐 늘어나지 않도록 해야 합니다.
  • position:relative - position:absolute가 포함된 모든 중첩 블록이 브라우저 창이 아닌 block.container에서 해당 위치의 좌표를 계산하도록 강제합니다.
  • display: inline-block - 블록 요소와 관련된 스타일을 텍스트에 적용할 수 있습니다.
  • 위치: 절대 - 특정 좌표를 사용하여 블록을 배치하려면: 하단, 왼쪽 - 하단 및 왼쪽 들여쓰기(좌표) 대신 상단 및 오른쪽을 사용할 수 있습니다.

이미지 위로 마우스를 가져가면 설명 표시

위에 표시된 방법은 마우스로 이미지 위로 마우스를 가져갈 때 텍스트를 표시하는 데 사용할 수 있습니다(온라인 상점의 제품을 설명하는 데 유용할 수 있음).