HTML로 이미지 링크
하고 싶은 일
링크된 문자의 색상과 이미지를 마우스로 과도하게 바꿉니다.
- 마우스 커서 정렬 -
처음에는 그림을 탭의 src 속성으로 설정했지만 css에서 src의 값을 변경할 수 없습니다 (;/ω･){CSS가 어렵습니다.)
index.html<span class="test-link"><a href="http://qiita.com"><img src="sample.png">リンク</a></span>
→①<> 태그를 사용하지 않고 태그의 배경 그림을 사용합니까?→②: Before 위선적인 요소를 사용하여(Tsa 선생이 논평)
① index 구현html<span class="test-link"><a href="http://qiita.com"> 링크</a></span>
index.css/* 일반시*/
span.test-link a {
font-size: 30px; /* 문자 크기 */
text-decoration: none; /* 링크 밑줄 삭제*/
padding-left: 31px; /* 이미지와 링크 문자 사이의 간격 조정(페이지 여백)*/
color: #AFAFAF; /* 일반적인 링크 문자 색상*/
background: url('sample.png'); /* 일반적인 이미지 */
background-size: contain; /* 최대 크기*/배경 크기 맞춤
background-repeat: no-repeat; /* 배경 이미지 반복하지 않음*/
}
/* 롤오버 시 */
span.test-link a:hover {
font-size: 30px; /* 문자 크기 */
text-decoration: none; /* 링크 밑줄 삭제*/
padding-left: 31px; /* 이미지와 링크 문자 사이의 간격 조정(페이지 여백)*/
color: #000000; /* hover 시 링크 텍스트 색상*/
background: url('hover.png'); /* hover 이미지 */
background-size: contain; /* 최대 크기*/배경 크기 맞춤
background-repeat: no-repeat; /* 배경 이미지 반복하지 않음*/
}
② index.html<a href="http://qiita.com"> 링크</a>
index.css/* 일반시*/
a {
font-size: 30px;
text-decoration: none;
padding-left: 31px;
color: #AFAFAF;
}
a::before{/*일반적인 이미지 지정*/
content: "";
display: inline-block;
width: 31px;
height: 31px;
background: url('sample.png');
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 5px;
}
/* 롤오버 시 */
a:hover {
font-size: 30px;
text-decoration: none;
padding-left: 31px;
color: #000000;
}
a:hover:before{/*마우스가 멈출 때 그림 지정하기*/
content: "";
display: inline-block;
width: 31px;
height: 31px;
background: url('hover.png');
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 5px;
}
Reference
이 문제에 관하여(HTML로 이미지 링크), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/KaI_Qiita/items/ac9226401214a1a7c9fb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<span class="test-link"><a href="http://qiita.com"><img src="sample.png">リンク</a></span>
Reference
이 문제에 관하여(HTML로 이미지 링크), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KaI_Qiita/items/ac9226401214a1a7c9fb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
