如何使綠色背景色占整個div的一半？

Question

我不知道為什么div欄從左到中間沒有顯示綠色背景顏色。 它只是顯示整個div欄。 可能是什么問題呢？ 謝謝..

 .BioUploadProgressBar p { display: block; width: 350px; padding: 2px 5px; margin: 12px 0; border: 1px inset #446; border-radius: 5px; } .BioUploadProgressBar p.initialize { /*background: #0c0 none 0 0 no-repeat;*/ background-color: #0c0; background-image: none; background-position: 50% 0px; background-repeat: no-repeat; } 

 <div> <div class='BioUploadProgressBar'> <p class="initialize">Upload file 0 %</p> </div> </div> 

Answer 1

Background-Position僅適用於Background-Image。 您將有以下選擇：

• 使用背景圖片（但也有其他要求）
• 使用第二個DIV
• 使用CSS漸變（ http://www.colorzilla.com/gradient-editor/-沒有IE8和其他東西）

Answer 2

嘗試使用此：

 .progress { height: 20px; overflow: hidden; background-color: #F5F5F5; border-radius: 4px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset; } .cpu { color: #FFF; text-align: center; transition: width 2.0s ease 0s; background-color: #FF6633; } 

 <div class="progress" style="width:500px;"> <div id="cpu" class="cpu" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10%"> <span>10</span> </div> </div> 

Answer 3

因為您的HTML不正確，而CSS甚至更不正確，所以您正在使用適用於背景圖片而不是顏色的背景屬性，請將HTML更改為此：

<div>
    <div class='BioUploadProgressBar'>
        <div class="initialize">Upload file 0 %</div>
    </div>
</div>

和您的CSS：

.BioUploadProgressBar {
    display: block;
    width: 350px;
    margin: 12px 0;
    border: 1px solid #446;
    border-radius: 5px;
}
.initialize {
    border-radius: 5px;
    display:inline-block;
    background: #0c0;
    width:175px;
    ;
    padding:5px;
}

請參閱

Answer 4

通過colorzilla的漸變解決方案

 .partialGradiend{ background: -moz-linear-gradient(left, rgba(0,204,0,1) 0%, rgba(0,204,0,1) 50%, rgba(0,204,0,0) 51%, rgba(0,204,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,204,0,1)), color-stop(50%,rgba(0,204,0,1)), color-stop(51%,rgba(0,204,0,0)), color-stop(100%,rgba(0,204,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cc00', endColorstr='#0000cc00',GradientType=1 ); /* IE6-9 */ width:300px; border: 1px inset #446; border-radius: 5px; text-align:center; padding:10px 0px; } 

 <div class="partialGradiend" style=""> 50% </div>