집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 단어를 이미지로 바꾸는 여러 가지 방법

CSS에서 단어를 이미지로 바꾸는 여러 가지 방법

php中世界最好的语言원래의: 2018-03-20 16:31:061734검색

이번에는 CSS에서 이미지를 사용하여 단어를 바꾸는 다양한 방법을 알려드리겠습니다. CSS에서 이미지를 사용하여 단어를 바꿀 때 Notes는 무엇인가요?

앞서 언급했듯이

이미지를 단어로 바꾸는 CSS 기술은 오랫동안 언급되지 않았습니다. 이미지를 사용하여 h1 태그 내의 텍스트 요소를 대체하여 페이지 디자인과 접근성 간의 균형을 유지하는 기술입니다. 이 글에서는 CSS에서 단어를 그림으로 바꾸는 9가지 방법을 자세히 소개합니다

텍스트 숨기기

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

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

음수 여백

을 사용하여 margin-left:- 2000px, 박스 모델을 왼쪽으로 2000px 오프셋한 후 너비를 2064px로 설정하여 2064px 중 64px만 페이지에 표시되도록 합니다. 배경은 패딩 상자 영역에 표시되고 텍스트는 콘텐츠 상자 영역에 표시되므로

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

에서 패딩

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

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

0 너비와 높이

span 태그를 추가하여 텍스트 내용을 저장하고 태그의 너비와 높이를 0으로 설정한 다음 오버플로를 hide

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 '微软雅黑';
    }
    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>

Pseudo-element

pre pseudo- h1에서 요소에 콘텐츠를 이미지의 URL로 설정합니다. 요소에 오버플로 숨기기를 설정합니다

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

Positive indent

text-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 '微软雅黑';
    }
  </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>

으로 설정할 수 있습니다. 자세한 내용은 이 글의 사례를 읽으신 후 방법을 익히셨을 것입니다. 흥미로운 정보가 있으니 PHP 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!