标签: gradient

我开始使用CSS渐变而不是实际图像,原因有两个:首先,CSS渐变肯定比图像加载更快,其次,它们不应该显示条带,就像许多光栅图形一样.我最近开始在各种屏幕上测试我的网站,而在较大的屏幕上(24英寸以上),构成我网站背景的CSS线性渐变显示非常明显的条带.作为临时修复,我将渐变覆盖了一个小的,重复的,透明PNG的噪声图像,这有点帮助.有没有其他方法来解决这个条带问题？

参考这些问题:

在ListView中向TextView添加渐变效果会生成NPE

和

如何在ListView上更改颜色和字体

我想知道如何去设置的背景TextView中ListView有渐变效果？

在上面的一个问题中,我最终将渐变效果添加到了文本中TextView.浏览第二个问题后,我似乎只能添加固定的背景颜色.

如何向背景添加渐变？我应该做一个CustomListAdapter？

我希望我的页面有一个从上到下的渐变背景.我希望背景像固定图像一样,渐变从当前浏览器视口的顶部延伸到底部,看起来与向上和向下滚动页面相同.换句话说,滚动时不会重复.它保持固定.

所以我想要的是:

滚动到底部后,你会看到这个

请注意,页面底部的渐变与顶部的渐变看起来完全相同.它从全黄色变为全红色.

我实际上能做的最好的是让渐变跨越页面的整个内容而不仅仅是可视部分,如下所示:

底部看起来像这样:

请注意,渐变跨越内容的整个长度,而不仅仅是当前可见的内容.因此,在页面顶部,您看到的主要是黄色,在页面底部,您看到的主要是红色.

我想我可以使用在y平面上拉伸并在x平面中重复的图像来解决这个问题,但我宁愿不这样做,因为如果可能的话,因为拉伸图像可能会导致块状,非粒状的渐变.这可以用CSS动态完成吗？

我希望有一个图像(背景图像)淡入透明,以便实际可以看到它背后的内容(由于透明度,几乎没有).

我可以通过PNG图像显然实​​现它,但我需要让我的平面设计师每次想要更改开始时更改图像=>停止透明点(也许我想要更多颜色或者我想要更少的颜色和更多透明度).

我有没有机会用CSS3达到同样的效果？我尝试在jpg(和png)上应用渐变透明但我无法看透它,除非PNG已经完成透明度(基本上是渐变)(这使得css渐变无用).

有什么建议吗？我正在通过网络挖掘,但似乎我没有使用正确的关键字,也许这是不可能的.

更新1:

代码说的不止是很多单词,我想做这样的事情(但语法显然是错误的):

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

所以这基本上就是我想写的方法(在Objective-C/Cocoa中,使用UIColors,但我真的只对底层数学感兴趣):

+ (UIColor *)colorBetweenColor:(UIColor *)startColor andColor:(UIColor *)endColor atLocation:(CGFloat)location;

举个例子,假设我有两种颜色,纯红色和纯蓝色.给定两者之间的线性渐变,我想计算在该渐变上的33%标记处的颜色:
所以,如果我这样调用我的方法:

UIColor *resultingColor = [UIColor colorBetweenColor:[UIColor redColor] andColor:[UIColor blueColor] atLocation:0.33f];

我会得到'B'的结果颜色,同样地,0.0f当位置返回颜色'A'时,1.0f将返回颜色'C'.

所以基本上我的问题是,我如何混合两种颜色的RGB值并确定它们之间某个"位置"的颜色？

几个答案提到使用GradientDrawable.setDither(true)在Android中绘制平滑渐变.这对我的代码没有任何影响.知道我需要改变什么才能在我的动态壁纸中获得漂亮的渐变效果吗？

GradientDrawable gradient = new GradientDrawable(Orientation.TL_BR, colors);
gradient.setGradientType(GradientDrawable.RADIAL_GRADIENT);
gradient.setGradientRadius(canvas.getWidth() * 2);
gradient.setDither(true);
gradient.setGradientCenter(-0.1f, -0.1f);
gradient.setBounds(cb);
gradient.draw(canvas);

为了说明它的一般形式,我正在寻找一种方式来加入几个点用渐变色线使用matplotlib,我不会在任何地方找到它.更具体地说,我正在绘制一条带有一条颜色线的2D随机游走.但是,由于这些点具有相关的序列,我想查看该图并查看数据的移动位置.渐变色线可以解决这个问题.或者是一条渐变透明度的线.

我只是想改善数据的虚拟化.看看这个由ggplot2包产生的漂亮图像.我在matplotlib中寻找相同的图像.谢谢.

Microsoft提供了一个出色的SVG渐变制作器,因此IE9也可以具有"CSS3"渐变(单击自定义).

我目前利用他们的逻辑为我的Fireworks和Dreamweaver扩展将渐变转换为SVG,但我只知道如何为标准的顶部,底部,左,右方向做.如果输入一个角度,我不进行转换,因为我不确定如何将x1,x2,y1,y2转换为CSS3角度.

梯度生成器提供如下值:x1 ="0%"y1 ="0%"x2 ="56.262833675564686%"y2 ="68.29999651227678%"

我对数学或三角学不太满意,所以有人可以帮助我吗？如果可能的话,我也想在Sass mixin中使用相同的数学来做类似的事情.

我遇到了CSS3渐变的跨浏览器渲染问题.当我尝试创建从透明颜色到白色的渐变时,会发生这种情况.

我用来测试的文件是:http: //f.cl.ly/items/0E2C062x3O161b09261i/test.html

使用的CSS是:

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

在Safari 6(mac)中,Rending看起来像我想要的:

Chrome渲染在渐变为白色之前淡化为灰色(Firefox在mac os上也呈现这种方式):

关于为什么这个奇怪的渲染可能是什么想法或建议？

有没有人有任何将渐变应用于CAShapeLayer的经验？CAShapeLayer是一个很棒的图层类,但它似乎只支持实心填充着色,而我希望它有一个渐变填充(实际上是一个可动画的渐变).

与CAShapeLayer(阴影,形状,笔触颜色,动画形状路径)相关的所有其他内容都非常棒.

我已经尝试将CAGradientLayer放在CAShapeLayer中,或者确实将CAShapeLayer设置为GradientLayer的掩码并将两者都添加到容器层,但这些都没有正确的结果.

我应该继承CAShapeLayer,还是有更好的前进方向？

谢谢.