bandes Gradient avec canal alpha

Je veux créer un gradient #111-transparent. Cependant, il n'y a pas beaucoup de couleurs entre les deux, donc j'obtiens des bandes dégradées, quoi que je fasse. J'ai essayé d'utiliser une image et plusieurs méthodes de dégradé CSS, rien ne fonctionne.bandes Gradient avec canal alpha

Je garde juste voir le cerclage, qui est un problème si grand que je ne peux pas utiliser des gradients maintenant. :/

Juste un test simple pour vous montrer: http://codepen.io/AartdenBraber/pen/GWdapm?editors=1000

Ce serait mieux pour moi si cela pourrait être résolu avec CSS seulement. J'ai déjà essayé de chevaucher plusieurs dégradés, mais cela n'a fait qu'empirer les choses.

Source

2017-03-23 Aart den Braber

Banding dépend du nombre de couleurs de votre moniteur peut voir. Même si vous l'avez rendu parfait sur votre moniteur IPS 100% sRGB, tout le monde ne le verra pas de cette façon - en d'autres termes, tout le design ne se traduit pas par du code. J'ai appris ceci allant d'un concepteur à un développeur au cours des 7 dernières années – ntgCleaner

J'ai fait une sorte de correction maintenant. J'ai ajouté un conteneur avec «overflow: hidden» et ajouté un énorme flou à l'image. Cela ne fonctionne qu'avec des images, malheureusement. –

Certains navigateurs banding dans des gradients de css.

Vous pourriez carreler un bruit transparent sous le gradient .png css.

http://noisepng.com peut générer l'image. J'ai utilisé la taille 500, l'intensité 90, l'opacité 6.
Vous devrez peut-être ajuster les valeurs pour obtenir le look désiré.

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 */ 
}

Source

2017-04-06 09:53:08

bandes Gradient avec canal alpha

Répondre

Questions connexes