背景颜色百分比？答案

【问题标题】：Background color percentage?背景颜色百分比？
【发布时间】：2009-08-24 08:49:39
【问题描述】：

他们有什么方法我可以使用背景颜色在我的分区的 50% 中使用 css 或 javascript 显示???我想要执行此操作的框有一个我想要填充的背景 Image[png] 50% 用颜色显示评级......我可以使用半填充背景图像的图像，但我相信这会减慢我的评级系统，他们有什么办法可以用颜色填充框 50%或者我不得不求助于用半填充图像本身替换背景..谢谢

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

无法使用 css 将其设置为将其父级填充 50%。您将不得不计算进度条的大小。因此，假设您的 div 为 100px（并且具有白色背景）并且您希望栏显示 55%，请在其中创建一个长度为 55px 的 div，并以进度条的颜色作为背景。

【讨论】：

【解决方案2】：

我不知道 div 中是否除了显示进度的背景颜色之外还有更多内容，但我们假设它是其中唯一的东西。您所要做的就是确保进度条具有固定的宽度、高度和溢出：隐藏。

然后在其中放置一个 div，该 div 具有您想要的颜色作为背景颜色，并且与容器 div 的宽度相同。两个 div 都应该有一个位置：属性定义，绝对或相对并不重要。然后唯一剩下的就是将内部 div 设置为您想要的位置，例如 left: -50%;

如果你想动态地做，只有最后一部分你需要 javascript。像 getElementById('progress').style = 'left: -50%' 这样的东西应该可以解决问题。

一个快速而肮脏（但有效）的例子：

<div style="width: 200px; height: 2em; overflow: 
    hidden; position: relative; padding: 1px; border: 1px solid red">

    <div style="width: 200px;  height: 2em; 
        background: blue; position: relative; left: -50%;">

        &nbsp;
    </div>

</div>

【讨论】：

【解决方案3】：

看看这个背景渐变色，研究一下正文开头的 CSS 代码！

正文语句代码中有三行CCS代码与后台主题相连：

body {
    font: 12px/18px Verdana, Arial, Tahoma, sans-serif;
    color: #001133 /* Other test colors: #006DD9 #444*/;
    /*background: #F4F4F4 url(i/bg.gif) - Another test;*/
    **background: -moz-linear-gradient(bottom, #ffffff, #3393C5);
    background: #3393C5 -webkit-gradient(linear, left top, left bottom, color-   stop(0.05, #3393C5), color-stop(1.00, #ffffff) ) no-repeat;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#3393C5',En dColorStr='#FFFFFF');**
    /*margin: 0px auto;*/
}

首字母在http://www.webdesignseo.go.ro 网站上找到。

【讨论】：