실제 텍스트를 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시하려면 어떻게 해야 합니까?

실제 텍스트를 사용하여 마우스 오버 시 텍스트 표시

이미지 스프라이트 대신 실제 텍스트를 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시할 수 있습니다. 방법은 다음과 같습니다.

마우스를 올리면 표시할 이미지와 설명을 컨테이너 div 안에 넣습니다. 이 div는 이미지와 크기가 동일해야 합니다.

 <img class="img__img" src= "http://placehold.it/257x200.jpg" /><br> <p></div>

다음 CSS를 컨테이너 div(.img__wrap)에 할당합니다.

컨테이너 div 내에 텍스트 설명을 절대적으로 배치합니다. (.img__description).

.img__description {
 위치: 절대;
 상단: 0 ;
 하단: 0;
 왼쪽: 0;
 오른쪽: 0;
 배경: rgba(0, 0, 0, 0.7);
 색상: #fff;
 가시성: 숨김;
 불투명도: 0;
}

이 솔루션을 사용하면 사용자가 마우스를 가져갈 때 이미지 위에 텍스트 설명이 표시됩니다. 끝났습니다.

위 내용은 실제 텍스트를 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!