标签: gradient

我想在图像上获得径向渐变效果（alpha = 1中间和边缘透明）。

你对我如何做到这一点有什么想法吗？

我正在寻找一种方法来创建模块化渐变，通过将其添加为 LESS mixin，该渐变可以应用于任意数量的项目。

例如，假设你有一个扁平的红色按钮，你也想应用渐变。我不想选择你的基本红色和更深的红色来渐变到渐变中，我想在平坦的红色按钮背景上叠加一个黑色渐变（顶部是透明的）。虽然它只有一种颜色（黑色），但褪色会导致它从黑色褪色到红色的错觉。理论上，您可以以一种方式将相同的梯度混合覆盖在多个项目上。而不是必须定义大量不同的梯度值。

这是纯 css 中的示例代码，说明我认为它应该如何工作但没有：

.btn {
 background: red;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)), color-stop(1,black));

}

此代码将导致加载渐变（黑色）。除非将红色设置为背景 div 或正文颜色，否则红色不会显示出来。我想将它附加到同一个班级。这是 LESS 版本：

.gradient (@startColor: fade(@black, 0%), @endColor: fade(@black, 50%)) {
 background-color: @black;
 background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor), color-stop(1,#000000));

}

我最接近我想要做的是将背景颜色设置为红色，然后在其上放置半透明渐变。但是，我希望在内嵌按钮上有目标颜色，等等......这是一个在彩色背景上显示透明渐变的小提琴。

是否可以将颜色值附加到实际项目（按钮）的背景上？梯度加载在顶部？

我有 2 个颜色的字符串表示（例如：“ #FFFFFF”和“ #000000”），我正在寻找一种以编程方式获取这两种颜色的中间颜色的方法。我称之为“中位数”的颜色将是在中心与这两个颜色相交的颜色。

我需要这个以便分两步绘制渐变：

• 从第一种颜色到中间颜色的 1 个渐变
• 1 从中间到第二种颜色的渐变

所以它看起来像从第一种颜色到第二种颜色的 1 个渐变，这是我做不到的。

我怎样才能做到这一点？

我希望图像从右到左淡出。它应该会逐渐消失，因为我们可以在它右侧 70% 处看到它的原始清晰视图，并在其左侧 30% 处开始逐渐淡出。

这就是我想要的样子：

这是我的代码：

#main_section {
  /*   border: 1px solid blue; */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  -o-box-flex: 1;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
}
#main_section li {
  margin-left: 5px;
  display: inline-block;
  font-family: Euphemia;
  font-weight: bold;
  color: green;
}
.style_number {
  font: italic 1.2em Georgia, Times, serif;
  font-weight: bold;
  color: #4169E1;
}
#img1::before {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, …

是否有某种技巧可以在 2d 空间中创建具有多个停靠点的渐变？我想做的是在我的画布中创建一个矩形，然后在每个角落都有一个不同的颜色停止。

我尝试创建 4 个渐变，每个角落一个，指向对角。（尝试线性和圆形）。但这不会产生我想要的效果，因为中心总是以圆形方式偏离颜色。

我想要的效果类似于将 2 个线性水平渐变放在彼此的顶部。然后是第三个垂直线性渐变，它不会影响前两个渐变的颜色，但只会在下降时将底部渐变淡入顶部渐变。所以顶部的两个角是第一个线性渐变，底部的两个角是第二个线性渐变。

我尝试过使用 globalCompositeOperation 但我能够实现的最接近的是 3 边渐变。不是 4。

我能想到的唯一方法是一次构建我的矩形一行。每条线都有一个线性渐变，重新计算并稍微改变，以便在绘制底线时它是第二个渐变。但这似乎不是最有效（或最容易编程）的方法。

图片

我想我在这里太新了，无法链接到照片。但这里是我的谷歌照片上 3 张图片的链接。

https://plus.google.com/photos/116764547896287695338/albums/6094993027344790369?authkey=CJnZ0I3JxbOMag

图 1：第一个渐变（设置顶部两个角的颜色）

图2：第二个渐变（设置底部两个角的颜色）

图像 3：图像 1 和 2 垂直混合在一起，使顶部的两种颜色淡入底部的两种颜色。

我想用渐变填充这个折线图的区域，这样渐变的底部是透明的，区域填充的顶部是黑色的。这可能吗？

我所有的谷歌搜索都显示了如下图表：http : //bl.ocks.org/d3noob/4433087 - 我不希望渐变基于值，在这个例子中，我希望顶部有红色面积，而不仅仅是当值达到该百分比时。

var entries = [{"date":"2016-01-06","value":15},{"date":"2015-11-17","value":15.4},{"date":"2015-11-11","value":16.5},{"date":"2015-09-24","value":15.1},{"date":"2015-08-22","value":15},{"date":"2015-08-12","value":15},{"date":"2015-07-30","value":14.6},{"date":"2015-07-19","value":14.8},{"date":"2015-07-18","value":14.9},{"date":"2015-07-12","value":14.9},{"date":"2015-07-08","value":14.9},{"date":"2015-06-29","value":14.3},{"date":"2015-06-21","value":14.5},{"date":"2015-06-18","value":14.7},{"date":"2015-06-09","value":15},{"date":"2015-06-08","value":14.1},{"date":"2014-12-06","value":13.4},{"date":"2014-09-10","value":13.1},{"date":"2014-08-01","value":14.2},{"date":"2014-07-07","value":15},{"date":"2014-05-31","value":14},{"date":"2014-05-24","value":15},{"date":"2014-05-14","value":15},{"date":"2014-05-13","value":14},{"date":"2014-05-08","value":14.5},{"date":"2014-05-02","value":15}];

var margin = {top: 30, right: 20, bottom: 30, left: 50},
	overlayW = $('.chart').innerWidth(),
	overlayH = $('.chart').innerHeight(),
	width = overlayW,
	height = 250 - margin.top - margin.bottom,

	parseDate = d3.time.format("%Y-%m-%d").parse,
	bisectDate = d3.bisector(function(d) { return d.date; }).left,
	formatValue = d3.format(",.2f");

var x = d3.time.scale()
	.range([0, width]);

var y = d3.scale.linear()
	.range([height, 0]);

var xAxis = d3.svg.axis()
	.scale(x)
	.tickSize(0)
	.tickValues(x.domain())

	.orient("bottom")
	.tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
	.scale(y)
	.tickSize(0)
	.ticks(5)
	.orient("left"); …

我有一个 svg，我需要用渐变填充它，css 是由脚本添加的，如果你使用单一的 RGB 颜色，它都可以正常工作，但是使用渐变，SVG 会导致白色背景。

脚本后的结果代码：

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
id="Livello_1" x="0px" y="0px" viewBox="0 0 70 70" 
style="enable-background:new 0 0 70 70;width: 50px; height: 50px;" 
xml:space="preserve">
<defs>
  <lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop>
    <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
    </lineargradient>
</defs>

<path class="st0" d="......" style="fill: url("#grC29M")">
</svg>

谢谢！

我想创建一个从内到外的背景渐变。在外面它应该变得更暗。这是一张图片：

谁能给我一些建议，我如何才能创造出这样的东西？或者我应该为此拍照？如果是，不同的屏幕分辨率有什么关系？或者关于横向/纵向模式？

根据我的要求，我需要在其中应用不同渐变颜色的成形路径。仅举个例子，我正在绕一个圈并尝试做同样的事情。

这是代码：

.box--blue{
  fill: blue;
}

.box--red{
  fill: red;
}

<div>
  <svg>
    <defs>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="transparent"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
    </defs>
    <symbol id="gra2" viewbox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" fill="url(#Gradient2)" />
    </symbol>
</svg>
</div>


<div class="box box--red">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

<div class="box box--blue">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

要求：

通过重用可用的 SVG，我需要这两个不同颜色的渐变形状。

浏览器支持：IE10+、chrome 和 Firefox。

注意：我不想在 SVG 下对每个颜色相关的渐变进行硬编码。Gradient 颜色应该可以继承。这就是我如何重用 SVG，IMO。

我正在使用 Folium 创建一个热图。我的数据包含 3 列，其中一个是类别、纬度和经度。经纬度点分为 3 类，如 A、B 和 C。我可以使用folium 绘制热图，但我需要添加显示点之间颜色差异的图例。我需要将点标记为基于类别的 3 种不同颜色。

我附上示例代码供您参考。感谢您的帮助。

提前致谢！

from folium import plugins
from folium.plugins import HeatMap
from folium.plugins import MarkerCluster
import pandas as pd

map = folium.Map(location=[lat, long],zoom_start =12) 
data = pd.read_csv(filename)
# List comprehension to make out list of lists
heat_data = [[row['LAT'],row['LONG'],] for index, row in data.iterrows()]
# Plot it on the map
HeatMap(heat_data).add_to(map)
# Display the map
map
map.save('C:\Temp\map2.html')