알파 채널로 그라디언트 밴딩

#111에서 transparent까지 그라데이션을 만들고 싶습니다. 그러나 중간에 색상이 많지 않으므로 그라디언트 밴딩을 사용합니다. 이미지와 여러 CSS 그라디언트 메서드를 사용해 보았지만 아무 것도 작동하지 않았습니다.알파 채널로 그라디언트 밴딩

나는 밴딩을 계속 보았고, 그것은 큰 그라데이션을 사용할 수없는 큰 문제입니다. :/

그냥 간단한 테스트 당신을 보여합니다 : http://codepen.io/AartdenBraber/pen/GWdapm?editors=1000

이것은 단지 CSS로 해결 될 수 있다면 그것은 나를 위해 가장 좋은 것입니다. 이미 여러 그라디언트를 겹치기 위해 시도했지만, 그 경우에만 더 나 빠졌습니다.

출처

2017-03-23 Aart den Braber

. 100 % sRGB IPS 모니터에서 완벽하게 만들었지 만 다른 모든 사람들이 그렇게 보지 않을 것입니다. 즉 모든 디자인이 코드로 변환되는 것은 아닙니다. 지난 7 년 동안 디자이너에서 개발자에게이 사실을 알게되었습니다. – ntgCleaner

나는 그것을 고쳐주었습니다. 오버플로 : 숨겨진 컨테이너를 추가하고 이미지에 거대한 흐림 효과를 추가했습니다. 슬프게도 이미지에서만 작동합니다. –

일부 브라우저는 CSS 그라데이션으로 밴딩을 표시합니다.

CSS 그라디언트에서 투명한 노이즈 PNG를 타일링 할 수 있습니다.

http://noisepng.com은 이미지를 생성 할 수 있습니다. 크기 500, 밝기 90, 불투명도 6을 사용했습니다.
원하는 모양을 얻으려면 값을 조정해야 할 수 있습니다.

https://jsfiddle.net/h4075sm0/

HTML

<div class="gradient"> 
    <div class="noise"></div>  
</div>

CSS 밴딩은 모니터가 볼 수있는 색상 수에 따라 달라집니다

html, body { 
    width: 100%; 
    height: 100%; 
} 

.noise { 
    width: 100%; 
    height: 100%; 
    background: url('https://i.imgur.com/UNfGD66.png'); 
} 

.gradient { 
    width: 100%; 
    height: 100%; 
    background: -moz-linear-gradient(top, rgba(17,17,17,1) 0%, rgba(17,17,17,0) 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, rgba(17,17,17,1) 0%,rgba(17,17,17,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, rgba(17,17,17,1) 0%,rgba(17,17,17,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#00111111',GradientType=0); /* IE6-9 */ 
}

출처

2017-04-06 09:53:08

알파 채널로 그라디언트 밴딩

답변

관련 문제