불규칙한 모양의 이미지 주위에 텍스트가 둘러싸일 수 있나요?

직사각형이 아닌 이미지 주위에 텍스트를 감쌀 수 있나요?

직사각형이 아닌 이미지 주위에 텍스트를 감싸는 것은 웹 디자인에서 일반적인 과제입니다. 여러 국가의 지도가 있고 국경에서 일정한 거리를 유지하면서 국가 모양을 텍스트로 감싸기를 원하는 경우를 생각해 보십시오. 이것이 가능합니까?

해결책

예, Tory Lawson이 2011년에 설명한 기술을 사용하여 직사각형이 아닌 이미지 주위에 텍스트를 둘러싸는 것이 가능합니다. 블로그 게시물 "직사각형이 아닌 모양 주위에 텍스트 감싸기" 이 방법에는 도형의 영역을 차단하기 위해 부동 div가 포함됩니다.

1단계: 둘러싸기 영역 정의

• 텍스트와 이미지 테두리 사이의 원하는 거리를 결정합니다.
• 편집 프로그램에서 이미지를 열고 그리드를 오버레이하세요.
• 그림을 그립니다. 패딩(예: 5px)을 고려하여 텍스트가 끝나야 하는 위치를 나타내는 경계 모양.

2단계: 너비 측정 목록 만들기

• 측정 일정한 간격으로 랩 영역의 너비(예: 10 픽셀).
• 이 측정값을 종이에 기록하세요.

3단계: Div 만들기

• div 만들기 이미지와 텍스트의 래퍼 역할을 합니다.
• 각 너비에 대해 추가 div를 만듭니다. 측정.

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

참고: 이 접근 방식은 CSS "text-wrap"을 사용하는 것만큼 간단하지 않습니다. 옵션이지만 텍스트 줄 바꿈 동작을 정밀하게 제어할 수 있습니다.

위 내용은 불규칙한 모양의 이미지 주위에 텍스트가 둘러싸일 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!