이미지가 비활성화 된 경우 CSS 투명한 배경 폴백

투명한 PNG 배경이 적용된 DIV가 있습니다. 방법이 나를 위해 (JS의 사용은 괜찮습니다) 거기 : 이미지가 비활성화 된 경우 CSS 투명한 배경 폴백

이미지 이미지를 사용할 때
그것에 일반 단색 배경 색상을 적용 활성화되어 투명도 효과를

2009-08-22 jeffreyveon

내가 기억하는 것처럼 배경색과 배경 이미지를 설정하면 투명 PNG에서는 작동하지 않습니다 (투명도에서 배경색이 보임). 이미지가로드되면, 당신은 당신이 좋아하는 방법으로 그것을 할 수

$().ready(function(){ 
    $('#trans_png').load(function(){ 
    $('.tans_back').css('background',$(this).css('background')); 
    }); 
});

DIV 번호의 trans_png 확인하는 데 사용됩니다

.trans_back { background:red } 
DIV#trans_png { background:url(reddot.png); position:absolute; left:-9px; }

그런 다음 스크립트를합니다 테 솔루션은 특별한 CSS 클래스를 사용하는 것입니다 , 나는 스크립팅없이 가장 단순하다.

출처

2009-08-22 06:56:58 Thinker

CSS 배경 이미지와 배경 색상을 모두 제공 할 수 있어야합니다. 이미지가 비활성화 된 경우 색상이 계속 표시됩니다.

출처

2009-08-22 06:39:03 chotchki

나는 당신이 일이 같은

jQuery lightbox

를 찾고 있습니다 생각합니다.

출처

2009-08-22 06:39:23 rahul

내 마음에 떠오르는 또 다른 솔루션은 기본적으로 단색 배경을 설정 한 다음 JavaScript로 이미지를로드하고 투명도를 적용 할 수 있다는 것입니다. 누군가 JS가 사용 중지되거나 이미지 다운로드가 실패하면 기본 단색 배경을 갖게됩니다.

출처

2009-08-22 06:39:47 RaYell

이것은 Thinker의 게시물을 기반으로 작성되었지만 작동하지 않는 것으로 나타났습니다.

나는 $('#trans_png').load 트리거하지 않았다 (jquery 1.9.1, firefox) - 이미지의 src로드 이벤트, 즉 $('#logo img').attr('src', 'images/layout/logo.png').load(function() {을 사용해야했다. 어떤 이미지라도 가능합니다.

배경을 복사해도 작동하지 않는다는 것을 발견했습니다. 명시 적으로 색상을 지우고 이미지 URL을 추가해야했습니다.

제가 또한 그렇게 하중 함수 내에서 루프를 첨가 여러 요소 (서브 메뉴 ul들)이 변경을 적용했다 :

$('#logo img').attr('src', 'images/layout/logo.png').load(function() { 
    $("ul.MenuBarHorizontal ul").each(function() { 
     $(this).css('background-color','none').css('background','none').css('background', $('#menu-trns-bg').css('background-image')); 
    }); 
});

이 본질적으로 고정 사상가의 대답이며, 단 I '는 나오지 않았어 이것을 이해하기 쉽게 주석에 넣으십시오.

명확히하기 위해 기본적으로 UL은 background-color: white;이고 div는 화면에서 벗어납니다. div#menu-trns-bg {position: absolute;left:-3000px;background-image:url(../images/layout/body-bg.png);} Spry 메뉴에서 사용하고 있습니다.

출처

2013-10-09 13:09:45 Chris

약한 연결에 취약점이있는 것으로 보입니다. CSS 대체 Javascript가 완료되지 않으면 가끔 로고 이미지가로드되지 않는 것을 보았습니다. 배경 이미지를 미리로드하고 자바 스크립트 루틴에서 true를 반환하려고 시도했지만 뭔가 이상이 있습니다. 개인적으로 이것은 위험 할 가치가 없으므로이 코드를 내 사이트에서 제거했습니다. – Chris

이미지가 비활성화 된 경우 CSS 투명한 배경 폴백

답변

관련 문제