html – 如何使用“进阶”部分的反转文本颜色创建一个进度条

发布时间：2020-12-14 19:31:53 所属栏目：资源来源：网络整理

导读：几个小时之后,我正在尝试,但我没有得到任何解决方案.任务是：创建一个具有动态宽度和居中的标签的进度条,它可以改变进程和未处理部分之间的文本颜色.这是一个澄清的图像：所以这样做很好,如果我知道整个进度条的宽度.但它在响应式设计中无法使用,其宽度是自

几个小时之后,我正在尝试,但我没有得到任何解决方案.任务是：创建一个具有动态宽度和居中的标签的进度条,它可以改变进程和未处理部分之间的文本颜色.这是一个澄清的图像：

所以这样做很好,如果我知道整个进度条的宽度.但它在响应式设计中无法使用,其宽度是自动计算的.

这是我的代码：

<div class="progress" style="width: 400px;">
 <div class="progressValue" style="width: 50%">
  <div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div>
 </div>
 <div class="progressLabel">I'm a progress text</div>
</div>

和我的CSS：

.progress {
    position: relative;
}

.progressValue {
    overflow: hidden;
    position: absolute;
    height: 20px;
    background-color: blue;    
}

.progressInnerLabel {
    position: absolute;
    text-align: center; 
    color: white;  
    height: 20px;    
}

.progressLabel {
    background-color: #eee; 
    text-align: center; 
    color: black;    
}

我也创建了一个小提琴,所以你可以玩耍：http://jsfiddle.net/Q82kF/2/

我想删除我的html的宽度：我的第一个div(class = progress)的400px,所以进度自动获得完整的可用宽度.有人有这个解决方案吗？

我不会用javascript(或任何lib)来操作.我认为必须有一个CSS / HTML唯一的解决方案.

解决方法

我不相信在纯CSS中是可能的,因为条形图填充部分中的文本需要为其父母宽度的100％.一个选择可能是使用 webkit masking,但当然这只能在Chrome&苹果浏览器.

我知道你说你不想要一个JS解决方案,但这是我唯一可以想到的方法.以下是您如何使用jQuery：http://jsfiddle.net/kthornbloom/zkL29/

CSS：

.progress-bar {
    background:#ccc;
    padding:10px 0;
    width:100%;
    text-align:center;
    position:relative;
}

.progress-fill {
    background:blue;
    color:#fff;
    width:50%;
    padding:10px 0;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}

JS：

function barWidth() {
    var barWidth = $('.progress-bar').width();
    $('.progress-fill-text').css('width',barWidth);
}
barWidth();
window.onresize = function() {
    barWidth();
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!