问题标签 [linear-gradients]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svg - D3.js:更新线性渐变中的停靠点
我正在尝试使用 D3.js更新stop
SVG 中的元素。linearGradient
你可以在这里看到我的工作小提琴:http: //jsfiddle.net/nrabinowitz/C85R8/
我正在使用标准 D3 模式的数据连接、输入、更新、退出,如下所示:
这适用于初始创建停靠点。但是,当我尝试更新时,该.selectAll('stops')
函数似乎找不到创建的元素。在小提琴中,当我检查 SVG 时,我在更新后看到两组停止元素(无法更新渐变)。
相比之下,使用文本元素运行几乎完全相同的代码可以完美运行。
为什么代码在更新时不能正确选择现有的停止元素?这是d3.select
Sizzle.js 或 Sizzle.js 中的错误吗?
css - 对于 CSS3 线性渐变,如果我们只考虑诸如 R 之类的一个,R、G、B 分量是否会以线性方式变化?
如果我在 CSS 中定义了一个线性渐变并且它以渐变的形式出现在屏幕上,那么红色值是否以恒定速率变化。(即对于整个梯度长度而言,它是红色的导数常数)。对于绿色和蓝色的颜色分量,同样的问题。
渐变可以从任何颜色到任何其他颜色。例如,一种颜色可能是#FF4400,另一种是#5599FF(只是随机颜色)。红色分量是否线性变化?
我指的是 CSS3 线性渐变,一个例子在这里:http ://dev.opera.com/articles/view/css3-linear-gradients/
google-chrome - 使用 Google Chrome 进行固定位置和线性渐变的问题
我需要一个具有线性渐变背景的固定 div。在所有浏览器中,背景始终位于 div 内的正确位置,而不是使用 Google Chrome (23.0.1271.52 beta-m),div 内容保持固定,但背景沿页面滚动。
用 Firefox 看看这个,然后用 Chrome:http: //jsfiddle.net/h3WNk/
我尝试使用background-attachment: fixed
,但这种方式根本不显示渐变。
似乎使用绝对定位有效,但即使用户滚动页面,我也需要将 div 固定在页面的左下角。
html - Mozilla Firefox 中的线性渐变工件
我在 Mozilla Firefox 16 中遇到线性渐变问题。
在屏幕上可以看到坏事(坏 - 块底部的灯线)。
代码:
和 CSS 部分:
我在 screenshot 上更改了 line-height 属性。
谁能描述它是什么线以及如何隐藏它?!
谢谢你。对不起我的英语不好。
google-chrome - Chrome中SVG线性渐变的舍入错误?
我最近看到 Chrome 渲染 SVG 线性渐变的一些问题。看看下面这个 SVG:
在Chrome(我的版本是23.0.1271.64)中加载这个html后,很容易在peek中看到一个明显的2px线性渐变误差,左侧线段显示一些绿色。在 IE 9 和最新的 Firefox 中,svg 都可以正确呈现。我认为这可能是 Chrome 或 WebKit 的错误。有谁知道如何解决?谢谢!
css - CSS3线性渐变不起作用
我观看了这个CodePen 演示,其中 CSS3linear-gradient
用于制作颜色效果,我linear-gradient
在 jsFiddle 尝试了相同的属性,但这个 CSS3 属性在其中不起作用。
这是CodePen 代码,这是我的jsFiddle 代码。
谁能向我解释这背后的问题是什么,或者是否有任何 jsFiddle 错误?
internet-explorer - IE 7-10 的多级线性渐变
所以我只熟悉使用过滤器和 PIE 的简单渐变,但我如何使用相同的工具进行多个停止/开始渐变?:
css - CSS渐变颜色以像素为单位停止
我正在开发一个 HTML/CSS/JS 项目,其中应用程序是固定大小的,并且元素必须根据设计精确定位。因为窗口大小是固定的,所以我可以轻松地在 CSS 中使用像素尺寸,而不必担心调整浏览器的大小。我也不必担心 IE 或 Opera:该应用程序只能在 webkit 和 firefox 中运行。
在一些地方,我需要一个渐变背景超过特定数量的像素。这可以通过类似的东西轻松完成
(及其-webkit-
和-moz-
对应物。)这对大多数元素都有作用。但是,有几个地方我需要设置颜色停止的顶部和底部像素位置。如果这些是百分点,那么可以通过以下方式完成:
(从灰色到黑色超过 60 像素,然后是透明的,然后是最后 10% 的黑色到灰色)。但是,我需要对像素完成相同的操作,因为所讨论的元素在不同时间的大小不同。如果需要,我想避免必须使用 JS 在不同的动态计算百分比处重新应用渐变。
所以,我的问题:有没有办法从最后指定一个颜色停止x 像素(不是百分比)?
javascript - 使用 JavaScript 时的动态 SVG 线性渐变
我可以在 html 正文中成功完成此工作,例如...
但是,我需要使用 javascript 动态创建它。只创建圆圈效果很好,当我将圆圈的填充指向线性渐变时它会失败 - 我只是得到一个黑色圆圈。
我想我没有正确设置 stop 'style' 属性。我尝试了另一种方法无济于事,请参见下文...
我正在使用 Chrome,在此先感谢!
在正文标签内:
css - 多浏览器的 CSS3 渐变
我有这个 CSS 线性渐变在 Firefox 中工作,似乎无法在 Safari 和其他浏览器中获得相同的结果。它是一个像纸一样的联系领域的背景。我已经尝试了整个身体和一个特定的元素,这种风格似乎只适用于 Firefox。尝试使用 -webkit- 和 -moz- 但没有运气。有任何想法吗?