带alpha通道的渐变带

我想创建从#111到transparent的渐变。但是，它们之间的颜色并不多，所以无论我做什么，我都会渐变色。我尝试使用图像和几个CSS渐变方法，没有任何工作。带alpha通道的渐变带

我只是不断看到条纹，这是一个很大的问题，我现在不能使用渐变。：/

只是一个简单的测试来告诉你： http://codepen.io/AartdenBraber/pen/GWdapm?editors=1000

它会为我是最好的，如果这可以用CSS才能解决。我已经尝试过重叠几个渐变，但这只会让它变得更糟。

来源

2017-03-23 Aart den Braber

捆扎取决于颜色的显示器可以看到数。即使您在100％sRGB IPS显示器上做到了完美，也不是每个人都会这么看 - 换句话说，并非所有的设计都能转化为代码。在过去的7年中，我从一位设计师学习到了开发人员。 – ntgCleaner

我确实有点修复它。我添加了一个带有“overflow：hidden;”的容器，并为图像添加了很大的模糊。它只能用于图像，遗憾的是。 –

某些浏览器以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

带alpha通道的渐变带

回答

相关问题