在径向渐变中改变颜色
Changing color in a radial-gradient
我已经准备好了 a complete example 我的问题 -
带有 div 和 3 jQuery UI 滑块的屏幕截图:
HTML代码:
<div id="myCanvas"></div>
<p>Select background color:
<span id="swatch"></span>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</p>
CSS代码:
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
JavaScript代码:
jQuery(document).ready(function($) {
$('#selectable').selectable();
$('#kukuSlider').slider();
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
// why does not the following line work?
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
console.log('background: ' + $('#myCanvas').css('background'));
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
问题:
#myCanvas
div 的背景颜色没有改变,即使我调用
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
而且我也试过调用类似的代码,但有一个冒号:
$('#myCanvas').css('background: radial-gradient(#FFFFFF, ' + hex + ');');
同时 #swatch
span 的背景颜色变化得很好。
简单的回答:您在 CSS 规则的末尾添加了 ;
。删除它。
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
jQuery(document).ready(function($) {
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="myCanvas"></div>
<p>
Select background color:
<span id="swatch"></span>
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
另请注意,您不能在行内元素(例如 p
中包含块级元素(例如 div
)。
我已经准备好了 a complete example 我的问题 -
带有 div 和 3 jQuery UI 滑块的屏幕截图:
HTML代码:
<div id="myCanvas"></div>
<p>Select background color:
<span id="swatch"></span>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</p>
CSS代码:
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
JavaScript代码:
jQuery(document).ready(function($) {
$('#selectable').selectable();
$('#kukuSlider').slider();
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
// why does not the following line work?
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
console.log('background: ' + $('#myCanvas').css('background'));
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
问题:
#myCanvas
div 的背景颜色没有改变,即使我调用
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ');');
而且我也试过调用类似的代码,但有一个冒号:
$('#myCanvas').css('background: radial-gradient(#FFFFFF, ' + hex + ');');
同时 #swatch
span 的背景颜色变化得很好。
简单的回答:您在 CSS 规则的末尾添加了 ;
。删除它。
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
jQuery(document).ready(function($) {
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = '#' + hexFromRGB(red, green, blue);
$('#swatch').text(hex);
$('#swatch').css('background-color', hex);
$('#myCanvas').css('background', 'radial-gradient(#FFFFFF, ' + hex + ')');
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
slide: refreshSwatch,
change: refreshSwatch,
max: 255,
value: 127
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
#myCanvas {
background: radial-gradient(#FFFFFF, #99CC99);
width: 300px;
height: 60px;
}
#red,
#green,
#blue {
width: 300px;
margin: 15px;
}
#swatch {
padding: 10px;
margin: 5px;
color: #FFF;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="myCanvas"></div>
<p>
Select background color:
<span id="swatch"></span>
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
另请注意,您不能在行内元素(例如 p
中包含块级元素(例如 div
)。