CSS의 투명 이미지 패턴 색상

CSS의 색상 그라디언트 위에 간단한 .png 패턴을 추가하려고합니다. 여기에 마크 업입니다 :CSS의 투명 이미지 패턴 색상

HTML :

<div class="pattern"> 
    <div class="widget_heading"> 
    <h4>Feed</h4> 
    </div> 
</div>

CSS :

.pattern { 
background: url(../img/leatherpattern.png) repeat; 
} 

.widget_heading { 
    display:block; border:1px solid #3F943A; height:40px; border-top-left-radius: 5px 5px; 
    border-bottom-right-radius: 5% 0%; 
    border-top-right-radius: 5px; background: #3c8522; /* Old browsers */ 
    background: -moz-linear-gradient(top, #3c8522 0%, #599d40 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c8522), color-stop(100%,#599d40)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #3c8522 0%,#599d40 100%); 
    background: -o-linear-gradient(top, #3c8522 0%,#599d40 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #3c8522 0%,#599d40 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #3c8522 0%,#599d40 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c8522', endColorstr='#599d40',GradientType=0); /* IE6-9 */ 
    }

나는 그것이 솟다 표시되지 왜 아무 생각이 없지만,가 보이고있다. 어떤 도움을 주시면 감사하겠습니다. 그들이 같은 공간을 차지하는 두 때 볼 수 없습니다, 그래서

http://jsfiddle.net/j4JjW/3/

출처

2013-03-20 Soulipsyz

더 단순한 작품 http://jsfiddle.net/btevfik/j4JjW/4/ – btevfik

같은 시간에 그라디언트와 배경 그림을 가질 수없는 것처럼 보입니다. – btevfik

보기 http://stackoverflow.com/questions/2504071/배경 이미지와 css3 그라디언트를 결합 할 수 있습니까? – btevfik

모두 당신의 그라데이션 및 이미지는 전혀 투명하지 않다. As you can see here 그래디언트는 이미지를 덮어 주며 그 반대의 경우에도 마찬가지입니다. 두 가지 중 하나에 투명성을 부여해야합니다. (and put it on top).

출처

2013-03-20 00:48:44 dezman

CSS의 투명 이미지 패턴 색상

답변

관련 문제