CSS3 그라디언트 및 배경 이미지

확인란의 상태가 변경되면 상위 클래스의 토글이 다른 배경 그라데이션을 제공하는 기능이 있습니다. 클릭하시면 Lorem을보실 수 있습니다.CSS3 그라디언트 및 배경 이미지

문제는 내 요소에 지정된 배경 이미지가 있기 때문에 내 예제의 큰 상자에서 작동하지 않는다는 것입니다. 그라디언트가 배경 이미지와 동일한 공간 내에 존재할 수 없다는 것을 알고 있습니다.

요소에 배경 그라디언트를 추가 할 수있는 임시 해결책이 있습니까? 이 이미지는 동적으로 채워지기 때문에 이미지에 추가 할 수는 없으며 모든 이미지가 동일한 크기가되지는 않습니다.

HTML/CSS를 전혀 변경해도 상관 없습니다. jQuery로 할 수 있다면 너무 좋습니다 :)

2011-02-25 Kyle

실제로 CSS 3의 그라데이션은 단지 생성 된 이미지입니다. 따라서 브라우저가 여러 배경을 지원하는 경우 (Modenizr을 사용하여 테스트 해보십시오) 두 개의 배경 이미지를 추가 할 수 있습니다. 좋아요 :

.multiplebgs.cssgradients .button { 
    background-image: url("img.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(247,148,34,0)), to(#dc7703)); 
    background-image: url("img.png"), -webkit-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); 
    background-image: url("img.png"), -moz-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); 
    background-image: url("img.png"), linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); 
}

출처

2011-02-25 13:58:14 Tokimon

아하,이 작품! 이제 jQuery 기능에 추가하기 :) 감사합니다. – Kyle

업데이트 : 체크 박스를 변경하지 못했습니다. 나는 틀린 각도에서 접근하고 있기를 기대한다. 아마도 클래스를 바꾸지 않고 CSS 자체를 설정해야한다. 하지만 이미지와 그라디언트가 섞여있는 한 당신의 대답은 감사합니다. – Kyle

그냥 chaning 클래스로 가능해야합니다. 그렇게하는 것이 좋습니다, 그것은 당신에게 더 많은 자유를 줄 수 있습니다. – Tokimon

배경 이미지로 요소 주위에 다른 div를 추가하고 그라디언트를 적용 할 수 있습니다. 이미지가 투명하면 그라디언트가 표시됩니다.

<div id="div-with-gradient"> 
    <div id="div-with-image"> 
     <!-- content --> 
    </div> 
</div>

출처

2011-02-25 13:51:36

CSS3 그라디언트 및 배경 이미지

답변

관련 문제