问题标签 [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.

0 投票
4 回答
3025 浏览

javascript - 背景顶部滚动上的渐变淡化文本

一直在寻找一种方法来淡化顶部和底部的滚动。我知道您在顶部和底部使用 2 png 的方式,问题是只有在纯色页面上滚动时似乎才有用。但我希望它发生在有背景图像的页面上..

有任何想法吗?如果它甚至可能?JS、HTML5、CSS?

这是一张图片来描述效果:

渐变文字滚动

0 投票
1 回答
855 浏览

android - Text color gradient in textview not working

I want to set gradient text color in my TextView. I have used this code for it

When activity is launched, the text is not shown. But if I change the orientation of my phone, then it will display the text in TextView with gradient color. I have tested it on HTC One V. It is working fine on emulator and Samsung device.

I have also tested the following example, and the same problem occur .

https://github.com/koush/Widgets

0 投票
2 回答
1170 浏览

javascript - 在 JQuery Slider 上添加 -webkit-linear-gradient 时 -moz-linear-gradient 中断

TL;DR -webkit-linear-gradient 正在破坏 -moz-linear-gradient

所以听到这个难题,我正在使用带有两个手柄的 Jquery Slider 插件,并且我有一个渐变作为背景颜色,以便为外部范围提供一些颜色。我要做的是在滑块移动时更新渐变的百分比。当同时使用 -moz 和 -webkit 标签时,它在 Chrome / Safari 中有效,但在 Firefox 中无效。该值是从第一个滑块的位置拉出的。

当我只有 -moz-linear-gradient 标签时,它可以工作,但是一旦我添加 -webkit-linear-gradient 标签,它就会在 Firefox 中中断。

这是代码

HTML:

JavaScript:

CSS:

这是一个链接,可以查看发生了什么以及css,因为它有很多:)。(在 chrome/safari 中打开,看看它应该做什么,Firefox 看看它坏了)

http://jsfiddle.net/DrewLandgrave/bep9A/

先感谢您 :)

0 投票
2 回答
20780 浏览

css - 三角形箭头的css渐变

请看一下http://jsfiddle.net/ghAgQ/ 我需要相同的渐变箭头,因为它是矩形。有什么想法是怎么做到的?谢谢

​</p>

0 投票
0 回答
215 浏览

php - PHP GD 2颜色3步渐变?

我正在尝试拍摄 png 图像(具有透明背景,黑色是唯一的前景色)并仅在黑色前景上叠加 2 色 3 步线性渐变。

例子; 从下到上:0% - 颜色 1、50% 颜色 2、100% 颜色 1。

这有可能让渐变只影响php-gd中的黑色前景吗?如果是这样,我将如何去做?

0 投票
2 回答
1399 浏览

css - CSS 线性渐变在实时服务器上不起作用(仅限 IE),在 localhost 上很好

我刚刚推出了一个我已经研究了一段时间的新 Intranet。一切都很好(除了不可避免的以用户为中心的问题和几个错误)

然而,由于某种原因,我的 css 线性渐变无法正常工作,这变得很明显(现在我有机会实际查看前端而不是破解代码来解决问题)。

这对我来说很奇怪,因为当我在其测试环境(本地主机)中查看同一个站点时,渐变会尽其所能。在同一台 PC 上,在同一浏览器中(打开 2 个选项卡,一个本地,一个外部)

所有其他 css(在同一样式文件中)工作正常。

0 投票
2 回答
269 浏览

css - IE9 渐变背景大小

有没有办法使用background-sizefor ?因为在我的情况下,添加到没有任何效果。IE9gradientsbackground-sizeCSS

[更新]

示例代码:

在这种情况下,背景大小不起作用。

0 投票
1 回答
13074 浏览

svg - 如何使用 SVG 渐变来显示相对于彩色区域大小的不同颜色

我正在使用 SVG 和 D3 创建条形图,并且有一个关于如何为它们着色的问题。我在这个网站和其他网站上搜索了很多问题,但还没有找到有同样问题的人。

我希望每个条都以一种颜色(例如黄色)从底部开始,并且随着条变高,逐渐混合更多的第二种颜色(例如红色),以使条具有最大潜力高度只是第二种颜色。在此示例中,处于其潜在高度一半的条形顶部将是橙色的。

我能够编写一个函数来为任何给定高度的条生成一个独特的线性渐变,该渐变可以根据需要对条进行着色。

但是,由于此图是动态的,并且随着数据的刷新,条形图的高度每秒可能会发生多次变化,因此每次为每个条形图创建和应用新的梯度肯定效率不高,并且可能导致刷新时严重滞后酒吧。(我承认我实际上除了静态测试用例之外没有尝试过这个,所以我对最后一个假设可能是错误的。)

使用静态渐变当然会产生类似这样的结果,其中颜色是根据条形的高度混合的,而不是区域的高度:

使用静态渐变

然而,在我想要的场景中,较小的条应该分别有很少的红色或深蓝色。

最后,我的问题是:有没有办法

  1. 创建一个应用于 SVG 区域本身的渐变(简单
  2. 已经说过以某种方式掩盖了渐变(简单
  3. 然后有选择地在代表图形条形的矩形下方露出?(???

或者,还有其他一些我忽略的技术吗?

谢谢

0 投票
1 回答
94 浏览

jquery - 在 IE 8 中只显示白色到黑色的渐变

我有一个渐变应用到一个 div,它是从浅灰色到稍深的灰色,它适用于除 IE8 之外的所有浏览器。我无权访问 css,所以我不得不使用 jquery 应用这些样式,但它们似乎适用于所有其他浏览器,所以我不确定为什么它不适用于 IE。这是代码:

然后我将所有类应用于 div,渐变 1-6。div 的 html 是:

该页面是http://www.brighamandwomens.org/Patients_Visitors/pcs/rehabilitationservices/mock/about.aspx 感谢您对此的任何帮助。

0 投票
1 回答
246 浏览

firefox - SVG 线性渐变大小在 Firefox 中没有改变

我用 SVG 创建的线性渐变有问题。在 Firefox 中,我无法将其扩展到 250 像素左右。这是我到目前为止所得到的。