마우스 오버시 버튼 이미지에 그라디언트 추가

버튼으로 사용중인 PNG 그래픽이 있고 사용자가 이미지 위로 마우스를 가져 가면 버튼 이미지에만 색상 그라디언트가 나타나게하고 싶습니다. 내가 찾는 모든 것은 배경 이미지 작업입니다.마우스 오버시 버튼 이미지에 그라디언트 추가

<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>

을 그리고 지금은 마우스 오버시 색상 변화를 달성하기 위해 CSS를 내부에 갈 필요 궁금 해요 : :

내 HTML은 다음과 같습니다

.btn:hover: { 
?? 
}

어떤 제안을 주시면 감사하겠습니다 .

당신은 인라인 또는 인라인 블록 요소와 IMG을 포장하고 포장에 의사 요소를 추가 할 필요가

출처

2015-02-05 fia928

이미지에 실제로있는 것 (PNG의 투명한 부분이 아님)이나 일반적인 버튼 영역에 그라디언트가 나타나기를 원하십니까? 후자의 경우 이것을 시도해보십시오 : http://jsfiddle.net/yvh32fub/ –

가능하면 PNG의 투명하지 않은 부분에 표시하고 싶습니다. – fia928

나는 실제로 다른 이미지 파일을 생성하고 그것을 원한다면 호버 (hover)에 스왑해야한다고 생각한다. 위에서 링크 된대로 CSS로 쉽게 할 수있는 전체 영역을 변경합니다. –

그 호버 만 표시

뿐인 : http://jsfiddle.net/xz7xy8dg/

CSS :

.wrap { 
    position:relative; 
    display:inline-block; 
} 

.wrap::after { 
    position:absolute; 
    height: 100%; 
    width:100%; 
    top:0; 
    left:0; 
    background: -moz-linear-gradient(top, rgba(0,255,0,1) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,255,0,1)), color-stop(100%,rgba(255,255,255,0))); 
    background: -webkit-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%); 
    background: -o-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%); 
    background: -ms-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%); 
    background: linear-gradient(to bottom, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffffff',GradientType=0); 
    display:none; 
    content: ' '; 
} 

.wrap:hover::after { 
    display:block; 
}

HTML :

<div class="wrap"> 
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/> 
</div>

출처

2015-02-05 01:22:59 cameronjonesweb

잘 작동합니다. 가능한 경우 이미지를 배경으로 사용하지 않는 것이 좋습니다. 성능이 저하됩니다.

<style> 
    button.mylink { border-width:0px; text-align:center; width : 60px; height : 20; display: inline-block; background-image : url(imgs/trailEnd_turnRight.png); text-decoration:none } 
    button.mylink:hover { background-image : url(imgs/trailEnd_turnRight_hover.png) } 
</style> 

<button class="mylink" href="#">abc</button>

출처

2015-02-05 01:49:19 Howard

마우스 오버시 버튼 이미지에 그라디언트 추가

답변

관련 문제