CSS에서 단어를 이미지로 바꾸는 9가지 방법에 대한 간략한 토론

CSS에서 단어를 이미지로 바꾸는 기술에 대해 오랫동안 아무도 언급하지 않았습니다. 이미지를 사용하여 h1 태그 내의 텍스트 요소를 대체하여 페이지 디자인과 접근성 간의 균형을 유지하는 기술입니다. 이 글은 CSS에서 단어를 그림으로 바꾸는 9가지 방법에 대한 관련 정보를 공유할 것입니다. 도움이 되기를 바랍니다.

텍스트 숨기기

h1 태그에서 제목 내용을 저장하기 위해 범위 태그를 추가한 다음 표시 스타일을 다음과 같이 설정합니다. 없음

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 &#39;微软雅黑&#39;;
    }
    span {
      display: none;
    }
  </style>
  <h1>
    <span>小火柴的蓝色理想</span>
  </h1>

음수 들여쓰기

text-index를 사용하여 :-9999px, 상대적으로 큰 음수 들여쓰기는 텍스트를 페이지 외부로 이동합니다.

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 &#39;微软雅黑&#39;;
      text-indent:-9999px;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

음수 여백

margin-left:-2000px를 사용하면 상자 모델이 왼쪽으로 2000px 오프셋됩니다. 그런 다음 너비를 2064px로 설정하여 2064px의 64px 부분만 페이지에 표시되도록 합니다. 배경은 패딩 상자 영역에 표시되고 텍스트는 컨텐츠 상자 영역에 표시되므로 padding

에서

  <style>
    h1 {
      width: 2064px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico) right no-repeat;
      font: 12px/1 &#39;微软雅黑&#39;;
      margin-left:-2000px;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

을 반복하지 않고 이미지의 배경을 오른쪽 정렬로 설정합니다. 따라서 높이를 0으로 설정하고 높이를 padding-top으로 바꾸고 Overflow:hidden을 설정합니다. 그러면 텍스트 내용을 저장하는 스팬 태그를 추가하고 태그의 너비와 높이를 0으로 설정하면 텍스트를 표시하지 않고 배경만 표시할 수 있습니다

  <style>
    h1 {
      width: 64px;
      padding-top: 64px;
      height:0;
      overflow:hidden;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 &#39;微软雅黑&#39;;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

0 너비와 높이

그런 다음 오버플로를 숨기도록 설정하세요.

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 &#39;微软雅黑&#39;;
    }
    span{display:block;width: 0;height:0;overflow:hidden;}
  </style>
  <h1><span>小火柴的蓝色理想</span></h1>

텍스트를 투명하게 할 수 있습니다

텍스트 색상을 투명하게 설정하고 글꼴 크기를 1px로 설정하면 줄 높이의 영향이 줄어듭니다

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      color:transparent;
      font-size:1px;
      }
  </style>
  <h1>小火柴的蓝色理想</h1>

의사 요소

의사 요소 이전에 사용하고 콘텐츠는 이미지의 URL로 설정되며 오버플로 숨기기는 h1 요소에 설정됩니다

  <style>
    h1 {
      width: 64px;
      height: 64px;
      overflow: hidden;
      font: 12px/1 &#39;微软雅黑&#39;;
    }
    h1:before {
      content: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      display: block;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

긍정적인 들여쓰기

텍스트 설정- indent:100%는 부모 요소 쪽의 너비 영역 오른쪽으로 텍스트를 들여쓰기합니다. 그런 다음 텍스트가 줄 바꿈되거나 오버플로되는 것을 방지하기 위해 white-space:nowrap 및 Overflow:hidden을 함께 설정합니다. 그러면 텍스트 내용이 숨겨집니다

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      font: 12px/1 &#39;微软雅黑&#39;;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Font size

font-size:0을 설정하면 글꼴 크기를 0

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font-size:0;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

로 설정할 수 있습니다. 관련 권장 사항:

텍스트 글꼴 CSS용 색상 설정 방법

CSS3 이미지 혼합 사용 방법

CSS3을 사용하여 아이콘 효과 만드는 방법

위 내용은 CSS에서 단어를 이미지로 바꾸는 9가지 방법에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!