png 이미지의 알파 채널을 배경색으로 채우기

알파 채널이있는 .png 이미지를 사용하여 마우스를 올리면 이미지가 바뀝니다. 이미지를 가리키면 배경색이 바뀝니다. 이미지가 바뀌는 것처럼 보입니다. 하지만 지금은 문제가 있습니다. 이것은 모든 브라우저에서 작동하지만 파이어 폭스에서는 작동하지 않습니다. 파이어 폭스에서는 때때로 이미지 옆에 얇은 선이 나타납니다. 어떻게 이런 일이 일어나지 않는지 확인할 수 있습니다.png 이미지의 알파 채널을 배경색으로 채우기

enter image description here

을 그리고이 같아야입니다 것입니다 :

이것은 와트는 파이어 폭스에서 발생합니다.

enter image description here

출처

2014-12-08 Sjoerd

나는 그것을 얻지 않는다에서,이다 잘못된 이미지 문제? 또한 잘못된 이미지가 실제로 사진 편집기에별로 보이지 않는 1 픽셀 경계를 가지고 있는지 확인하는 것도 고려해보십시오. 이 문제를 재현하기 위해 코드 및/또는 js 바이올린을 게시 할 수 있습니까? – DRC

문제는 이미지 주위에 배경색의가는 선이 나타납니다. 이미지에는 내 포토샵에서 1 픽셀 경계선이 없습니다. 그리고이 문제는 Firefox – Sjoerd

코드에만 나타나거나 발생하지 않았습니다. – DRC

당신이 두 요소를 아래와 같이 사용해야 있도록 2 배경 요소 하나에 할당 할 수 없습니다 :

.object{ 
 
    float: left; 
 
    border: 1px solid #FFF; 
 
} 
 
.object:hover{ 
 
    background: #FEF; 
 
    border: 1px solid #F00; 
 
}

<div class="object"> 
 
    <img src="https://wiki.videolan.org/skins/common/images/vlc_wiki.png"/> 
 
</div>

출처

2014-12-08 16:36:03

seudo 선택기를 사용하여 요소가 마우스 오버 될 때 두 번째 배경을 지정할 수 있습니다 (예 : .object : hover {background : #fff;}). –

png 이미지의 알파 채널을 배경색으로 채우기

답변

관련 문제