Färbung 50% der Fortschrittsbalken

Question

Ich muss 50% der Fortschrittsbalken mit roter Farbe. Hier ist, was ich versucht habe, meine CSS und HTML:

.progress { 
 
    width:100%; 
 
    display: inline-block; 
 
    height: 0.4615384615384615em; 
 
    padding: 0.0769230769230769em; 
 
    background: #fff; 
 
    border: 1px solid #c0c0c0; 
 
    position: relative; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
    background: #f9f9f9; 
 
    background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); 
 
    background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0); 
 
    filter: none \9; 
 
} 
 
.progress.complete { 
 
    height: 0.9em; 
 
    position: relative; 
 
}

<div id="id1" class="progress complete"> 
 
    <span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span> 
 
</div>

Wie es zu färben, ohne Text zu <span> Elemente in der Ausgabe hinzufügen?

Answer 1

Sie haben vergessen height & position-span Tag

.progress { 
 
    width:100%; 
 
    display: inline-block; 
 
    height: 0.4615384615384615em; 
 
    padding: 0.0769230769230769em; 
 
    background: #fff; 
 
    border: 1px solid #c0c0c0; 
 
    position: relative; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
    background: #f9f9f9; 
 
    background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); 
 
    background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0); 
 
    filter: none \9; 
 
} 
 
.progress.complete { 
 
    height: 0.9em; 
 
    position: relative; 
 
}

<div id="id1" class="progress complete"> 
 
    <span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span> 
 
</div>

Answer 2

Wenn Sie möchten, das zu tun, ohne span tagpseudo selector ::after dann wie unten zu Stil verwenden, die

.progress { 
 
    width:100%; 
 
    display: inline-block; 
 
    height: 0.4615384615384615em; 
 
    padding: 0.0769230769230769em; 
 
    background: #fff; 
 
    border: 1px solid #c0c0c0; 
 
    position: relative; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
    background: #f9f9f9; 
 
    background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); 
 
    background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0); 
 
    filter: none \9; 
 
    overflow:hidden; 
 
} 
 
.progress:after{ 
 
    content:''; 
 
    position:absolute; 
 
    background: red; 
 
    left: 0%; 
 
    top:0; 
 
    width: 50%; 
 
    height:10px; 
 
    box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2); 
 
    z-index:9; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
}

<div id="id1" class="progress complete"> 
 

 
</div>

Span tagdefault Anzeige ist inline so müssen Sie, dass inline-block ändern und height zu es.

.progress { 
 
    width: 100%; 
 
    display: inline-block; 
 
    height: 0.4615384615384615em; 
 
    padding: 0.0769230769230769em; 
 
    background: #fff; 
 
    border: 1px solid #c0c0c0; 
 
    position: relative; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
    background: #f9f9f9; 
 
    background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); 
 
    background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%); 
 
    background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0); 
 
    filter: none \9; 
 
    overflow: hidden; 
 
} 
 

 
.progress.complete { 
 
    height: 0.9em; 
 
    position: relative; 
 
} 
 

 
span { 
 
    background: red; 
 
    left: 0%; 
 
    width: 50%; 
 
    height: 15px; 
 
    display: block; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2); 
 
}

<div id="id1" class="progress complete"> 
 
    <span title="progress bar" rel="tooltip"></span> 
 
</div>