이번에는 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 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!
추천 도서:
위 내용은 CSS에서 단어를 이미지로 바꾸는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!