이 기사에서는 HTML과 CSS를 사용하여 이미지에 텍스트를 추가하는 방법을 소개합니다. 내용이 매우 자세합니다.
더 이상 고민하지 말고 바로 본론으로 들어가겠습니다~
1 HTML과 CSS로 표현하는 이점
#. 🎜🎜 #"이미지 자체에 텍스트를 쓰는 것"이 아니라 "HTML과 CSS를 통해 이미지에 텍스트를 구성하는 것"은 다음과 같은 이점이 있습니다. (추천 튜토리얼:CSS 동영상 튜토리얼)
확대해도 문자가 흐려지지 않습니다 검색엔진에서도 읽혀요 (SEO에 적용 가능) 문자 선택 가능 반응형 디자인을 사용하면 글꼴 크기를 조정할 수 있습니다. (스마트폰 디스플레이에서 소문자 같은 것을 할 수 있습니다... ) #🎜🎜 #2. 이미지에 텍스트를 배치하는 방법1단계: 이미지를 준비해야 합니다
#🎜🎜 #예를 들어 어두운 배경에 흰색 텍스트를 배치하고 싶습니다. 2단계: div 요소에 이미지와 문자를 넣습니다. div 태그에 이미지와 문자를 넣습니다. 이 예에서는 p 태그에 "Great Wall"이라는 텍스트를 배치합니다. 물론 p태그 대신 title태그를 사용하거나,span태그를 사용할 수도 있습니다.<div class = "example" > <img src="image/greatwall.jpg" alt="HTML과 CSS를 사용하여 이미지에 텍스트를 추가하는 방법은 무엇입니까? (코드 예)" > <p>万里长城</p> </div>3단계: 위치 속성 지정 각 요소의 CSS 위치 속성을 설정합니다. div에 대해 position:relative를 상위 요소로 지정하고 문자열이 포함된 p 태그에 대해 절대값을 설정합니다. img 태그가 움직이지 않습니다. p 태그의 위치를 위쪽:0으로 설정합니다. 이미지를 가로 방향으로 배치하려면 img 태그의 너비를 width: 100%로 지정하세요.
.example{/*父元素div*/ position: relative;/*相対定位*/ } .example p { position: absolute;/*絶対定位*/ color: white;/*文字设为白色*/ top: 0; left: 0; } .example img { width: 100%; }효과는 다음과 같습니다:
텍스트는 이미지의 왼쪽 상단에 나타납니다. 위치:절대 상위 요소는 상위 요소를 기준으로 위치를 결정합니다. top:0; left:0은 "이미지가 상위(div)의 왼쪽 상단에 배치됩니다"를 의미합니다.
4단계: 텍스트 스타일 조정 이제 글꼴 스타일을 조정해 보겠습니다. 글꼴을 확대하고 굵게 만들어 보세요. 또한, 미려한 효과를 나타내기 위해 글꼴의 종류도 변경해 보세요..example{ position: relative; } .example p{ position: absolute; color: white; top: 0; left: 0; font-family :楷体,sans-serif; font-weight: bold; font-size: 2em; } .example img{width: 100%;}효과는 다음과 같습니다:
설명해 주세요: 크기를 수정하려는 경우. 이미지를 특정 픽셀로 지정할 때 너비: 100%에 따라 상위 요소의 div에 대한 고정 픽셀로 너비를 지정하십시오.
3. 텍스트를 이미지 중앙에 배치하세요
어떤 경우에는 "텍스트를 이미지 중앙에 배치하고 싶습니다" the image", 이 시점에서 CSS 코드는 다음과 같아야 합니다.
.example{ position: relative; } .example p{ position: absolute; color: white; /* top: 0; left: 0;*/ font-family :楷体,sans-serif; font-weight: bold; font-size: 2em; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; } .example img{width: 100%;}효과는 다음과 같습니다.
위의 센터링을 설명하자면
#🎜 🎜 #상단과 좌측이 50%
기본적으로 중앙에 배치됩니다. 그러나 이렇게 하면 텍스트 크기가 벗어나게 됩니다.
텍스트 부분의 오류 조정변환 사용: 번역을 사용하여 텍스트 차이를 수정합니다. 번역(-50%,-50%)에서 세로 텍스트와 가로 텍스트의 차이가 수정됩니다. ttransform은 CS3 속성이지만 IE8 이외의 다른 브라우저에도 해당됩니다. 이전 브라우저에 대응하기 위해 번역은 공급업체 접두사(-ms 및 -wabkit-)를 사용하여 작성됩니다.
마진과 패딩을 추가하고 공백이 있으면 중심에서 벗어난 경우가 있습니다. 따라서 주의 깊게 값을 0으로 변경해 보겠습니다.
4. 이미지에 배경색으로 카테고리 이름 표시이미지에 배경색으로 텍스트를 표시하는 방법은 다음과 같습니다. . 다음 CSS 코드를 참조하세요. HTML은 위와 동일합니다.
.example { position: relative; } .example p { position: absolute; top: 0; left: 0; margin: 0; color: white; background: lightblue; font-size: 15px; line-height: 1; padding: 5px 10px; } .example img { width: 100%; }
효과는 다음과 같습니다.
# 🎜🎜#이미지 모서리에 라벨을 붙이면 문자가 고정됩니다. 이 경우 영상의 밝기에 관계없이 선명하게 볼 수 있습니다. 마찬가지로 이미지의 크기를 변경하려면 상위 요소의 div 너비를 지정하는 것이 좋습니다.
위 내용은 HTML과 CSS를 사용하여 이미지에 텍스트를 추가하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!