在径向梯度[闭合]中改变颜色。


我已经准备好了 浑然天成 对于我的问题 –

截图中有一个div和3个jQuery UI滑块。

screenshot

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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

React JS和Spring boot CORS政策

2022-9-8 22:44:23

未分类

如何在Python中有效地将一个字典中的字符串列表与另一个字典列表进行比较?

2022-9-8 22:44:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索