jQuery设置背景：-webkit-linear-gradient

Question

正在进行中......

＆＃13;

＆＃13;

var value = 0,
  pos = 0,
  progressHidden = false,
  progressEl = $('.ProgressPercent'),
  timer = setInterval(progress, 100);

var ProgressColourTween = [
  "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
  "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
  "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
  "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
  "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
  "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
  "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
  "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
  "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
  "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

function progress() {

  // run counter
  value++;
  if (value <= 100) {
    $('.ProgressPercent .Percent').text(value);
    $('.Overlay .Percent').text(value);
    $('.ProgressPercent .Percent').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressPercent .Sign').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressWrap .Overlay .Percent').css({
      background: "-webkit-linear-gradient(#CCCCCC, #CCCCCC 20%, transparent 20%, transparent 100%)"
    });
  }
}

＆＃13;

.ProgressWrap {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 100px;
}
.ProgressWrap .Overlay {
  position: absolute;
}
.ProgressWrap .Overlay .Percent,
.ProgressWrap .Overlay .Sign {
  float: left;
  background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ProgressWrap .ProgressPercent .Percent,
.ProgressWrap .ProgressPercent .Sign {
  float: left;
}
.ProgressWrap > span {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ProgressWrap">
  <div class="Overlay">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
  <div class="ProgressPercent">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题＆amp;问题

1）。覆盖文本看起来不一样

您仍然可以看到重叠文本所在的混合颜色。这在上面的百分比符号上很明显。

2）。使用jQuery操作background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%);

从上面的内容可以看出，我正在尝试通过jQuery设置background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%);，这样我就可以设置它以便我可以操作100 - value

的百分比

没有jQuery后台尝试：

＆＃13;

＆＃13;

var value = 0,
  pos = 0,
  progressHidden = false,
  progressEl = $('.ProgressPercent'),
  timer = setInterval(progress, 100);

var ProgressColourTween = [
  "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
  "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
  "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
  "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
  "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
  "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
  "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
  "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
  "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
  "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

function progress() {

  // run counter
  value++;
  if (value <= 100) {
    $('.ProgressPercent .Percent').text(value);
    $('.Overlay .Percent').text(value);
    $('.ProgressPercent .Percent').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressPercent .Sign').css({
      "color": ProgressColourTween[value]
    });
  }
}

＆＃13;

.ProgressWrap {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 100px;
}
.ProgressWrap .Overlay {
  position: absolute;
}
.ProgressWrap .Overlay .Percent,
.ProgressWrap .Overlay .Sign {
  float: left;
  background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ProgressWrap .ProgressPercent .Percent,
.ProgressWrap .ProgressPercent .Sign {
  float: left;
}
.ProgressWrap > span {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ProgressWrap">
  <div class="Overlay">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
  <div class="ProgressPercent">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用css mix-blend-mode来调整内容和背景之间的对比。

  

mix-blend-mode CSS属性描述了元素的内容   应该与元素的直接父母和。的内容混合   元素的背景。

例如，使用overlay选择器设置的.ProgressWrap .Overlay .Percent, .ProgressWrap .Overlay .Sign值

＆＃13;

＆＃13;

var value = 0,
  pos = 0,
  progressHidden = false,
  progressEl = $('.ProgressPercent'),
  timer = setInterval(progress, 100);

var ProgressColourTween = [
  "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
  "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
  "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
  "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
  "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
  "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
  "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
  "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
  "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
  "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

function progress() {

  // run counter
  value++;
  if (value <= 100) {
    $('.ProgressPercent .Percent').text(value);
    $('.Overlay .Percent').text(value);
    $('.ProgressPercent .Percent').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressPercent .Sign').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressWrap .Overlay .Percent').css({
      background: "-webkit-linear-gradient(#CCCCCC, #CCCCCC 20%, transparent 20%, transparent 100%)"
    });
  }
  
}

＆＃13;

.ProgressWrap {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 100px;
}
.ProgressWrap .Overlay {
  position: absolute;
}
.ProgressWrap .Overlay .Percent,
.ProgressWrap .Overlay .Sign {
  float: left;
  background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  mix-blend-mode: overlay;
  border:none;
  outline:none;
  padding:0;
  margin:0;
}

.ProgressWrap .ProgressPercent .Percent,
.ProgressWrap .ProgressPercent .Sign {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ProgressWrap">
  <div class="Overlay">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
  <div class="ProgressPercent">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

将color设为值

＆＃13;

＆＃13;

var value = 0,
  pos = 0,
  progressHidden = false,
  progressEl = $('.ProgressPercent'),
  timer = setInterval(progress, 100);

var ProgressColourTween = [
  "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
  "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
  "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
  "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
  "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
  "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
  "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
  "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
  "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
  "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

function progress() {

  // run counter
  value++;
  if (value <= 100) {
    $('.ProgressPercent .Percent').text(value);
    $('.Overlay .Percent').text(value);
    $('.ProgressPercent .Percent').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressPercent .Sign').css({
      "color": ProgressColourTween[value]
    });
    $('.ProgressWrap .Overlay .Percent').css({
      background: "-webkit-linear-gradient(#CCCCCC, #CCCCCC 20%, transparent 20%, transparent 100%)"
    });
  }
  
}

＆＃13;

.ProgressWrap {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 100px;
}
.ProgressWrap .Overlay {
  position: absolute;
}
.ProgressWrap .Overlay .Percent,
.ProgressWrap .Overlay .Sign {
  float: left;
  background: -webkit-linear-gradient(#CCC, #CCC 50%, transparent 50%, transparent 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  mix-blend-mode: color;
  border:none;
  outline:none;
  padding:0;
  margin:0;
}

.ProgressWrap .ProgressPercent .Percent,
.ProgressWrap .ProgressPercent .Sign {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ProgressWrap">
  <div class="Overlay">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
  <div class="ProgressPercent">
    <div class="Percent">0</div>
    <div class="Sign">%</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;