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

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

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

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

 <img  class="img__img" src="http://placehold.it/257x200.jpg" alt="실제 텍스트를 사용하여 마우스 오버 시 이미지 위에 텍스트를 표시하려면 어떻게 해야 합니까?" ><br> <p></p>

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

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

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

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

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