标签: gradient

正如我们在SVG中所知,角度线性梯度是通过设置属性x1,x2,y1,y2.但是,如果我们只得到角度,

1.如何计算x1,y1,x2,y2的结果？

2.这个公式tan(角度)=(y2-y1)/(x2-x1)是否正确？我该如何计算所有参数.

我一直在尝试使用HTML5和渐变渐变,我想使用3种颜色并逐渐淡化它们.目前我只能使用两种颜色.

的jsfiddle

我的目标与此图像类似:

颜色应该慢慢淡入彼此,我很满意我目前工作的淡化效果,虽然想添加第三种颜色.

我试图添加一个颜色数组来使用,但颜色函数是从教程修改(如果我能找到将添加链接),我不太清楚如何做到这一点.

任何人都可以提供任何adivce吗？

提前致谢.

我不是试图让它看起来与图像完全相同,但如果我可以为我当前版本添加另一种颜色应该没问题.

编辑:由于混乱:我不是在寻找一个"静态"的灰色,如果你仔细观察我的例子,你会看到一个褪色效果.我想达到相同的效果,但是有3种颜色的渐变,看起来与上面的图像类似.

它应该"闪烁"并逐渐淡化.提供赏金,因为我正在努力创造3种颜色,我认为这将是最容易的..

我找不到关于如何使用bootstrap-sass的mixin的好参考.我正在尝试为我的背景颜色添加渐变效果,我想学习如何使用mixin中的内置渐变功能.

// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor),     to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari   5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-  str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and   down
}

在application.css.scss文件中,我试过了

body {
padding-right: 50px;
padding-left: 50px;
gradient-vertical($startcolor: $white, $endcolor: #08C); …

我知道几种向UIView添加背景渐变的方法.我想知道什么是最有效和可扩展的方式,为什么？以下是我使用过的技巧:

• 创建UIView的子视图并覆盖drawRect,我在当前上下文中绘制渐变.

  一个.当使用上面的渐变创建它与视图的边界我想要装饰并插入这个背景渐变作为第一个子视图,即– insertSubview:atIndex:

  湾 从上面得到背景渐变视图后,我在图像上下文中渲染它并将其用作背景图像,即

  UIGraphicsBeginImageContext(gradView.bounds.size);
  [gradView.layer renderInContext:UIGraphicsGetCurrentContext()];
  UIImage *gradientImg = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  UIColor *background = [UIColor colorWithPatternImage:gradientImg];
  self.view.backgroundColor = background;
  

• 创建可伸缩的PNG并使用它来装饰视图背景.技术与装饰UIButton的方式非常相似.

  -(UIColor *)backgroundColor:(CGRect)frame
  {
      UIImage *bg = [UIImage imageNamed:@"background_23x36"];
      bg = [bg resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 11.0, 0.0, 11.0)];
      UIGraphicsBeginImageContextWithOptions(frame.size, YES, [[UIScreen mainScreen] scale]);
      [bg drawInRect:frame];
      UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
      return [UIColor colorWithPatternImage:image];
  }
  

• 创建UIView的子视图,但不要覆盖drawRect,而是使用CAGradientLayer.与http://nscookbook.com/2013/04/recipe-20-using-cagradient-layer-in-a-custom-view/相似

那么什么是最有效和可扩展的方式来添加渐变作为背景？

我使用CSS3制作了一个圆圈,麻烦在旧浏览器(即7等)中,圆圈显示为正方形.

我知道我可以使用背景图像作为备份,但这不会破坏使用代码的意义吗？

如果我要将背景图像放入,那么它会在CSS中出现？

.ButtonB:hover, .ButtonB.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}

这里我的CSS让梯度在任何浏览器中工作,包括IE到版本9(IE9):

.wrapper { 
    background:-moz-linear-gradient(top , #0f1925, #000) repeat scroll 0 0 transparent;                                      
    background:-o-linear-gradient(top , #0f1925, #000) repeat scroll 0 0 transparent; 
    background:-webkit-linear-gradient(top , #0f1925, #000) repeat scroll 0 0 transparent; 
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0f1925', endColorStr='#000', GradientType=0); 
}

但它不适用于IE 10/11.

有任何想法吗？

提前致谢

我想知道这种渐变颜色在android中是否可行？如果可能的话怎么样？ http://www.techandall.com/wp-content/uploads/2013/10/techandall_mobile-analytics-UI-concept_preview1.jpg

谢谢,Bskania.

我想制作一个透明度变化的径向渐变,我可以使它线性工作但不是径向工作

background: -webkit-gradient(linear, left top, left bottom,from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)));

此代码线性工作,但更改为

background: -webkit-gradient(radial, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)));

停止工作

我需要做些什么来改变这一点,到目前为止所有的帮助只显示线性渐变

这是我的d3强制布局：（请运行代码段）

var width = 600,
    height = 600;

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var color = d3.scale.category20();

var dataNodes = [
    { x:   width/3, y:   height/3 , group: 0, color: 'blue'},
    { x: 2*width/3, y:   height/3, group: 1, color: 'red' },
    { x:   width/2, y: 2*height/3, group: 2, color: 'green'}
];

var dataLinks = [
  { source: 0, target: 1},
  { source: 1, target: 2},
  { source: 2, target: 0}
];

var force = d3.layout.force()
    .charge(-400)
    .linkDistance(height/2) …

是否可以通过CSS将水平渐变设置为文本？(左字母一种颜色,右边一种颜色).