이미지를 표시하는 동안 CSS를 사용하여 HTML에서 텍스트를 효과적으로 숨길 수 있는 방법은 무엇입니까?

CSS를 사용하여 텍스트 숨기기

HTML에서는 CSS를 사용하여 태그 스타일을 지정하여 텍스트를 이미지로 바꿀 수 있습니다. 그러나 원본 텍스트는 태그에 할당된 공간 내에서 계속 표시될 수 있습니다.

이 문제를 해결하기 위한 한 가지 기술은 텍스트를 화면 밖으로 밀어내는 것입니다. 이는 다음 CSS 속성을 사용하여 달성할 수 있습니다.

text-indent: -9999px;

이렇게 하면 텍스트가 왼쪽으로 멀리 보내져 보이지 않게 됩니다. 또한 이미지를 표시하려면 background-image 속성을 설정하고 해당 URL을 지정합니다. 이미지를 수용할 수 있도록 요소의 높이와 너비를 정의하는 것을 잊지 마세요.

background-image: url(/the_img.png);
height: 100px;
width: 600px;

또 다른 방법은 화면에 큰 공간이 생기지 않도록 하면서 텍스트를 숨기는 것입니다.

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

text-indent를 100%로 설정하면 텍스트가 자체 너비만큼 오른쪽으로 효과적으로 이동되어 보이지 않게 됩니다. 공백: nowrap은 텍스트가 다음 줄로 넘어가는 것을 방지하고, 오버플로: 숨겨진 내용은 초과된 내용을 자릅니다.

위 내용은 이미지를 표시하는 동안 CSS를 사용하여 HTML에서 텍스트를 효과적으로 숨길 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!