使用JavaScript编辑CSS渐变
我正在通过Firefox中的JavaScript编辑CSS渐变。我有一些输入框，用户可以在其中输入1.方向2.第一种颜色3.第二种颜色
这是HTML
<html>
<head>
<title>Linear Gradient Control</title>
<script>
function renderButton(){
var orientation = document.getElementById("firstValue").value;
var colorOne = document.getElementById("firstColor").value;
var colorTwo = document.getElementById("secondColor").value;
//alert(orientation);
//alert(colorOne);
//alert(colorTwo);
};
</script>
<style>
#mainHolder
{
width:500px;
background: -moz-linear-gradient(left, green, red);
}
</style>
</head>
<body>
<h1>Gradient Editor</h1>
<form>
<input type="text" id="firstValue">orientation</input><br />
<input type="text" id="firstColor">first color</input><br />
<input type="text" id="secondColor">second color</input><br />
</form>
<button type="button" onclick="renderButton()">Render</button>
<div id="mainHolder">Content</div>
</body>
</html>
回顾一下，用户将指定其3个值，这些值将传递给函数“
renderButton（）;”。我可以使用哪行更改CSS3渐变的3个值，以便用户可以制作自己的自定义渐变框？我假设它只需要一两行。
PS我意识到这个例子只适用于Firefox。我只想在使用不同的浏览器之前先弄清楚这个概念。
问题答案：
从以下内容开始：
var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
如果您需要支持比Firefox更多的浏览器，则需要结合使用浏览器嗅探或某些类似Modernizr的功能检测来完成。
以下是使用类似于Modernizr的功能检测（在Firefox，Chrome，Safari，Opera中测试过）进行功能检测的示例。
// Detect which browser prefix to use for the specified CSS value
// (e.g., background-image: -moz-linear-gradient(...);
// background-image: -o-linear-gradient(...); etc).
//
function getCssValuePrefix()
{
var rtrnVal = '';//default to standard syntax
var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];
// Create a temporary DOM object for testing
var dom = document.createElement('div');
for (var i = 0; i < prefixes.length; i++)
{
// Attempt to set the style
dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';
// Detect if the style was successfully set
if (dom.style.background)
{
rtrnVal = prefixes[i];
}
}
dom = null;
delete dom;
return rtrnVal;
}
// Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
-
渐变色编辑器 渐变色编辑器可以设置粒子中某个属性随时间变化的颜色，渐变色编辑器的界面如下图 渐变色编辑器可以进行如下操作： Mode可以选择两种模式，Blend模式会按照当前时刻相邻的两个关键帧进行插值得到当前帧的颜色，Fixed模式会直接使用当前时刻的前一个关键帧颜色。 点击色带上方的空白处可以插入一个 alpha 关键帧，点击色带下方的空白处可以插入一个 rgb 关键帧。 拖动关键帧左右移动可
-
主要内容：1. 线性渐变,2. 径向渐变,3. 圆锥渐变,4. 重复渐变CSS 中的渐变指的是两种或多种颜色之间的平滑过渡，以前我们必须使用事先定义好的图像来实现渐变效果，在 CSS3 出现以后则简单了很多，CSS3 为实现渐变效果提供了一种灵活的解决方案。 通过 CSS3 您可以定义三种类型的渐变，分别为线性渐变（通过 linear-gradient() 函数创建）、径向渐变（通过 radial-gradient() 函数创建）和圆锥渐变（通过 conic-grad
-
感谢阅读。我试图用css编辑一个菜单栏，但是菜单项没有改变。 我意识到菜单栏的部分是：菜单栏，菜单，菜单项，但最后一个不能正常工作。帮助 我正在使用场景生成器。
-
问题内容： 要在元素上具有渐变背景，我需要执行以下操作： 现在，jQuery是否不打算消除与跨浏览器兼容性问题有关的所有工作？有没有更好的方法可以做到这一点。不使用任何其他插件？ 问题答案： 有一个用于处理渐变的jQuery插件。我没用过，但是看起来很简单 http://plugins.jquery.com/project/gradient 继承人如何使用它： http://www.julien-
-
问题内容： 我一直在尝试在背景图片的顶部使用线性渐变，以使背景底部的阴影效果从黑色变为透明，但似乎无法使其显示。 我在这里阅读了其他案例和示例，但没有一个对我有用。我只能看到渐变或图像，但不能全部看到。 只需单击第一个徽标，就忽略该效果，此后我要尝试的是整个网站的正文。 这是我的CSS代码： 问题答案： 好的，我通过 在行尾 添加背景图片的网址来解决此问题。 这是我的工作代码：
-
问题内容： 我四处寻找，对此一无所获。 如果我有一段文字，有没有办法，也许是CSS3，当它向下到页面时逐渐改变文字的颜色吗？而不是渐变的方式，因为那只会对单词而不是整个文本段落起作用。 因此，我希望一些文本从白色开始，然后随着段落的结尾逐渐变黑。 我真的不确定是否可以完成…也许有一个Java脚本可以做到。 谢谢。 问题答案： 您可以使用CSS来做到这一点，但它仅在webkit浏览器（Chrome和