Question

他们是否可以使用背景颜色在我的部门的50％中使用css或javascript显示???我想要执行此操作的框有一个背景图像[png]我要填写50％的颜色用于显示收视率......我可以使用半填充背景图像的图像，但我相信这会减慢我的评级系统，是他们的任何方式我可以填充50％的颜色框或者我不得不求助于用半满的图像替换背景。谢谢

Answer 1

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

Answer 2

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

然后在其中放置一个div，其中包含您想要的颜色作为背景颜色，并且宽度与容器div相同。两个div都应该有一个位置：属性定义，绝对或相对并不重要。然后唯一剩下的就是将内部div设置为你想要的位置，例如左：-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>

Answer 3

看看这个背景渐变色，并在开始时研究用于身体的CSS代码！

有三行CCS代码与body语句代码中的背景主题相关联：

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网站上找到。

背景颜色百分比？

3 个答案: