HTML과 CSS를 사용하여 이미지에 텍스트를 추가하는 방법은 무엇입니까? (코드 예)

이 기사에서는 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="/static/imghw/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   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 중국어 웹사이트의 기타 관련 기사를 참조하세요!