javascript - jQuery 设置背景 : -webkit-linear-gradient-6ren

javascript - jQuery 设置背景 : -webkit-linear-gradient

转载作者：行者123 更新时间：2023-11-28 05:11:52

工作正在进行中...

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%)"
    });
  }
}

.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;
}

<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>

问题与疑问

1)。重叠的文本看起来大小不一样

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

2)。操纵背景:-webkit-linear-gradient(#CCC, #CCC 50%,透明50%,透明100%);使用jQuery

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

的百分比

没有 jQuery 后台尝试:

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 {
  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;
}

<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>

最佳答案

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

The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

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

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%)"
    });
  }
  
}

.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;
}

<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>

将颜色设置为值

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%)"
    });
  }
  
}

.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;
}

<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>

关于javascript - jQuery 设置背景 : -webkit-linear-gradient，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41310056/

文章推荐： html - 显示 : inline-block forces new line

文章推荐： javascript - 如何在onclick事件中使用父表的id作为参数？

文章推荐： c++ - 使用 Ragel 和 C++ 编译错误

文章推荐： Javascript 代码不适用于 Chrome 和 firefox，但适用于 IE

webkit - 我可以检测特定的 webkit 功能来检查用户是否使用 webkit 浏览器
如果我需要检测 Firefox，我使用了以下代码: var firefox = !(window.mozInnerScreenX == null); 我很好奇是否有类似的东西可以在不检查用户代理字符串
webkit - Webkit HTTPS身份验证
我正在开发我的第一个Windows窗体应用程序以使用WebKit.Net。我需要连接到https站点并弹出身份验证表单。使用.Net内置的浏览器，身份验证表单会自动弹出，但是WebKit只是将我放到4
webkit - 你能在 webkit 框反射上做 webkit css 转换吗？
就像您可以将 -webkit-gradient 添加到 -webkit-box-reflect 一样，您可以对反射执行转换吗？我正在反射的图像有一个 Angular ，我想尝试旋转反射或稍微倾斜它以使
webkit - QWebview/webkit 禁用文本选择
我有一个加载一些网页的 QWebView，但是当鼠标被按下并拖动时的问题是它选择了所有阻碍它的东西。有什么办法可以摆脱这个吗？？我不想选择文本和其他项目。，如果我限制 mouseMove 和 mo
webkit - 使用 Webkit 来设置界面样式？
我对编程和创建程序真的很陌生。最近我在浏览 iTunes 文件夹时看到了一个 .css 文件。我打开它，看到很多 -webkit 样式来设置界面样式。我可以使用 webkit 来设置 C++、.NE
webkit - 如何删除div包装器(webkit)内textarea下方的边距
这个问题在这里已经有了答案: How do I fix inconsistent Textarea bottom margin in Firefox and Chrome? (4 个回答) 4年前关闭
webkit - webkit-scrollbar是否可以与webkit-transition一起使用？
我希望自定义webkit-scrollbar为悬停状态设置不同的背景颜色动画。下面的代码在悬停时更改颜色，但不设置任何动画。它可以在div上运行，所以我怀疑webkit-scrollbar在过渡时效果
webkit - 是否可以使用 WebKit 在清晰的背景上呈现网页内容？
我正在尝试评估 WebKit 补丁的可能性，该补丁将允许所有渲染的图形渲染到完全透明的背景上。想要的效果是呈现完全没有任何背景的 Web 内容，它应该看起来漂浮在桌面上(或浏览器窗口后面显示的任何内
webkit - Webkit 中的行高问题(部分无法点击的链接)
这是 HTML 代码: A B C 这是 CSS 代码: .row { line-height:0;} .item { line-hei
CSS 动画 : -Webkits in webkits
我经常看到这样的 css 动画代码: @-webkit-keyframes anim{ 0{ -webkit-transform: perspective(400px) rotate3d(
animation - 影响 -webkit-animation 中的 -webkit-transform 函数而不影响应用于目标元素的其他 -webkit-transform 函数？
我想为元素的 -webkit-transform: rotateX() 设置动画，同时允许元素保持其 -webkit-transform: rotate() 属性不变。考虑以下代码: @-webkit
webkit - 为什么 mozilla 和 webkit 将 -moz- 和 -webkit- 添加到 CSS3 规则之前？
CSS3 规则带来了许多有趣的特性。取border-radius ，例如。该标准规定，如果您编写此规则: div.rounded-corners { border-radius: 5px; }
qt - Selenium Webdriver 支持 Javafx 2.0 Webkit 或 QT5 Webkit(目标 : headless webkit)
我在想: 有没有人考虑过为嵌入式 Javafx 2.0 Webkit 浏览器或新的 QT5 - Webkit 实现 webdriver-interface。有人对朝着这个方向发展的一些 Github
webkit/webkit.h : No such file or directory
我正在尝试使用 WebKit 创建 Vala 程序。这是我编译它的方式: valac --pkg gtk+-3.0 --pkg granite --pkg glib-2.0 --pkg webkitg
webkit - 使用 nightly 源编译 webkit
我刚刚开始使用 webkit，我想先自己执行构建。我对如何使用 nightly sources of webkit 进行编译有点困惑。主 webkit 站点上的构建说明说要使用整个 SVN 树来执行完
node-webkit - Node Webkit - 从文本字段获取数据并写入文本文件
我在做一些我认为很简单的事情时遇到了问题。读取输入字段的值，然后将该值写入文本文件。我得到它的工作，但只是部分和不一致。发生的情况是，文本 a) 被截断(并非所有在该字段中输入的数据都写入文件)和 b
css - Webkit 内存限制与 -webkit-animation
我在使用 -webkit-animation 时遇到内存问题。原则我想为渐变背景制作动画。由于它们在关键帧中不可设置动画，我将每个背景放在不同的 div 中，并且我正在使用那些 div 不透明度和
webkit - -webkit-transform 和适应级联(如何不覆盖以前的设置)
困境: 在我的 CSS 文件中，我有这个: div { -webkit-transform: scale(0.5); } 在我的 jQuery 中，我稍后会这样做: $('div).css('
webkit - 构建网络爬虫——使用 Webkit 包
我正在尝试构建网络爬虫。我需要两件事: 将 HTML 转换为 DOM 对象。按需执行现有的 JavaScript。我期望的结果是一个 DOM 对象，其中执行加载的 JavaScript 已经执行。
iphone - webkit 溢出滚动触摸与 webkit 转换冲突
似乎在元素上应用 webkit-transform 属性，或者它的父元素具有 webkit-over-flowing-scrolling: touch 完全打破了滚动中的滚动根本不起作用。有没有人遇

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城