标签: gradient

我正在为我的网站背景使用渐变。在 safari 和 firefox 中看起来不错，但在 chrome 和 opera 中闪烁很严重。我在其他网站/帖子上读到过有关 chrome 的条带和抖动问题的信息。我尝试过使用 CSS 来渲染渐变，也尝试过使用 svg 来渲染。两者都有相同的闪烁结果。

我可以编写代码来强制 chrome 和 opera 像 safari 或 firefox 一样渲染渐变吗？

我试过 -webkit-transform:translateZ(0); 有和没有 webkit 前缀。它不能解决问题。还有其他建议吗？

PS 我的渐变是 90 度（从左到右）#66cccc 到 #349A9A。我不知道颜色是否有任何区别，但如果可以解决问题，我愿意稍微调整一下。

我在 .svg 文件中使用这段代码在元素上应用不透明度淡出渐变。以下代码运行良好，但从左到右淡入淡出，而不是从上到下垂直淡出。

我需要更改哪些代码才能实现此目的？谢谢您的帮助！

SVG 文件：

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         baseProfile="full">
         <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
            <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
              <stop stop-color="white" offset="0"/>
              <stop stop-color="white" stop-opacity="0" offset="1"/>
            </linearGradient>
            <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
          </mask>
    </svg>

CSS：

mask: url(/mypath/mask.svg#m1);

如何在 JavaFX 中开发如下所示的渐变？

我想创建一个具有两个渐变的背景 - 彼此层叠。

我创建了下面的示例，似乎我无法将多个渐变放在一起。（该示例是基于MDN-Using multiple background和MDN-gradient创建的）

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
.linear-repeat {
  background: repeating-linear-gradient(45deg,
      blue, blue 5px, white 5px, white 10px);
}
.combined-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255)), 
    repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
}

<div class="radial-gradient">radial gradient</div><br/>
<div class="radial-gradient linear-repeat">linear gradient</div><br/>
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/>
<div class="combined-gradient">combined gradient 2</div>

也许以下约束会阻止分层渐变：

只有最后一个背景可以包含背景颜色。

如果不允许将两个渐变分层作为背景，我应该如何以其他方式分层它们？

是否可以将渐变用作渐变中的一种颜色？

对于我的特定目的，我有一个从左到右的初始渐变：

linear-gradient(to right, red, darkgray);

但我希望深灰色部分实际上是从上到下的渐变：

linear-gradient(to bottom, darkgray, white);

我尝试了我希望工作的代码：

linear-gradient(to right, red, linear-gradient(to bottom, darkgray, white));

但这似乎不起作用，而且我还没有看到有人写过关于渐变中渐变的可能性。

编辑：这是不可能的 [CSS 渐变是图像，不能用作其他渐变中的颜色]，但@hungerstar 在下面有一个很好的解决方法：在另一个渐变上叠加一个带有透明度的渐变。

我正在尝试绘制箭头以可视化热图上的梯度。这是我到目前为止的代码：

import matplotlib.pyplot as plt
import numpy as np
function_to_plot = lambda x, y: x + y ** 2
horizontal_min, horizontal_max, horizontal_stepsize = 0, 3, 0.3
vertical_min, vertical_max, vertical_stepsize = 0, 3, 0.6

xv, yv = np.meshgrid(np.arange(horizontal_min, horizontal_max, horizontal_stepsize), 
                     np.arange(vertical_min, vertical_max, vertical_stepsize))

result_matrix = function_to_plot(xv, yv)
xd, yd = np.gradient(result_matrix)

def func_to_vectorize(x, y, dx, dy, scaling=1):
    plt.arrow(x + horizontal_stepsize/2, y + vertical_stepsize/2, dx*scaling, dy*scaling, fc="k", ec="k", head_width=0.1, head_length=0.1)

vectorized_arrow_drawing = np.vectorize(func_to_vectorize)

plt.imshow(result_matrix, extent=[horizontal_min, horizontal_max, vertical_min, vertical_max])
vectorized_arrow_drawing(xv, yv, xd, yd, …

我正在尝试在 Sketch 中重新创建渐变工具。Sketch中的工具使用两个不同颜色的点来定义渐变：

我希望输出采用 CSS 线性渐变值的形式。CSS 线性渐变的构建方式是一个角度和 x 个色标，并定义了一个颜色和一个百分比：https : //developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

因此，我想将相对于应呈现渐变的矩形的两个点转换为 CSS 格式（具有正确百分比的两个参数）。

关于如何解决这个问题的任何想法？

我在 Javascript 中创建不同的 L 形路径。它们的长度和位置不同。我想有一个 linearGradient 作为它们的笔触，其中第一个停止偏移位于 x=10 像素的位置，即颜色的变化总是在 x 像素之后开始。

使用渐变的标准方式只是提供相对定位（例如，对象边界框）。由于不同的对象边界框，这会导致不同的停止偏移。

这是一个示例：

  path.p1 {
    fill: none;
    stroke-width: 20px;
  }

<svg height="600" width="1000">


  <path class="p1" d="M10 10 V 100 H 100 " stroke="url(#cl1)"/>
  <path class="p1" d="M150 10 V 100 H 200 " stroke="url(#cl1)"/>
  <path class="p1" d="M250 10 V 100 H 400 " stroke="url(#cl1)"/>

    <defs>
        <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.02" style="stop-color:grey;stop-opacity:1" />
            <stop offset="0.15" style="stop-color:orange;stop-opacity:1" />
            <stop offset="0.2" style="stop-color:orange;stop-opacity:1" />
        </linearGradient> …

我试图更新每个时期的权重，但我正在批量处理数据。问题是，为了规范损失，我需要在训练循环之外录制 TensorFlow 变量（要跟踪和规范化）。但是当我这样做时，训练时间是巨大的。

我认为，它将所有批次的变量累积到图中并在最后计算梯度。

我已经开始跟踪 for 循环外和 for 循环内的变量，后者比第一次要快。我很困惑为什么会发生这种情况，因为无论我做什么，我的模型的可训练变量和损失都保持不变。

# Very Slow

loss_value = 0
batches = 0

with tf.GradientTape() as tape:
    for inputs, min_seq in zip(dataset, minutes_sequence):
        temp_loss_value = my_loss_function(inputs, min_seq)
        batches +=1
        loss_value = loss_value + temp_loss_value

# The following line takes huge time.
grads = tape.gradient(loss_value, model.trainable_variables)

# Very Fast

loss_value = 0
batches = 0

for inputs, min_seq in zip(dataset, minutes_sequence):
    with tf.GradientTape() as tape:
        temp_loss_value = my_loss_function(inputs, min_seq)
        batches +=1
        loss_value = loss_value + temp_loss_value …

大家好，

我需要知道，如何在颤振中的着色器内创建从 topLeft 到 bottomRight 的渐变颜色，例如2此图像中的示例？

我尝试使用这个迷你着色器代码来做到这一点，但它仍然对我不起作用。

final Shader linearGradient = LinearGradient(
      colors: <Color>[
        Color(0xff002fff),
        Color(0xff00f4ff),
      ],
    ).createShader(Rect.fromCircle(center: Offset(200, 0), radius: 150));

任何人都可以有一个想法，如何创建？或者现在在 Flutter 中并非不可能？？？。