填充背景颜色只有其总宽度的50％ [英] fill background color only 50% of it total width

问题描述

有可能在CSS中填充背景颜色只有它的总宽度的50％？

我试图做一个进度条，我需要填充背景颜色

请提供指针。

伪元素方法：

 < div class =progress>< / div> 
  

EXAMPLE

  .progress {
 width：200px; 
 height：50px; 
 border：1px solid black; 
 position：relative; 
} 
 .progress：after {
 content：'\A'; 
 position：absolute; 
 background：black; 
 top：0; bottom：0; 
 left：0; 
 width：50％; / *指定宽度.. * / 
} 
  

线性梯度法： h2>

这种方法的优点是可以指定多种不同的颜色。

此处的示例

  .progress { 
 width：200px; 
 height：50px; 
 border：1px solid black; 
 background：-webkit-linear-gradient（left，black 50％，white 50％）; 
 background：-moz-linear-gradient（left，black 50％，white 50％）; 
 background：-ms-linear-gradient（left，black 50％，white 50％）; 
 background：linear-gradient（left，black 50％，white 50％）; 
} 
  

---

没有JS / JQUERY的动画

这些方法都可以使用纯CSS进行动画处理。

此处的示例

  .progress：after {
 / *其他样式.. * / 
 width：50％; / * end width .. * / 
 -webkit-animation：filler 2s ease-in-out; 
 -moz-animation：filler 2s ease-in-out; 
动画：filler 2s ease-in-out; 
} 
 
 @ -webkit-keyframes filler {
 0％{
 width：0; 
} 
} 
  

转换方法

此处的示例

  .progress：after {
 / * other styling .. * / 
 width：0; 
 transition：all 2s; 
 -webkit-transition：all 2s; 
} 
 .progress：hover：after {
 width：50％; 
} 
  

Is it possible in CSS to fill background color only 50% of its total width?

I am trying make a progress bar where I need to fill background color based on the "%" of progress.

Please provide pointers.

解决方案

There are multiple different ways to achieve this.

Pseudo element approach:

<div class="progress"></div>

EXAMPLE HERE

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {
    content:'\A';
    position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:50%; /* Specify the width.. */
}

Linear-gradients approach:

The advantage to this approach is that you can specify multiple different colors..

EXAMPLE HERE

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    background: -webkit-linear-gradient(left, black 50%, white 50%);
    background: -moz-linear-gradient(left, black 50%, white 50%);
    background: -ms-linear-gradient(left, black 50%, white 50%);
    background: linear-gradient(left, black 50%, white 50%);
}

---

Animation without JS/JQUERY

Either of these approaches can be animated with pure CSS..

EXAMPLE HERE

.progress:after {
    /* other styling .. */
    width:50%; /* End width.. */
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

@-webkit-keyframes filler {
    0% {
        width:0;
    }
}

Transition approach

EXAMPLE HERE

.progress:after {
    /* other styling.. */
    width:0;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.progress:hover:after {
    width:50%;
}

这篇关于填充背景颜色只有其总宽度的50％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！