代码之家 › 专栏 › 技术社区 › halocursed

背景颜色百分比?

css jquery javascript

halocursed · 技术社区 · 17 年前

我可以使用css或javascript在50%的分区中使用背景颜色来显示它们吗???我想在其中执行此操作的框中有一个背景图像[png],我想用显示评级的颜色填充50%。……我可以使用半填充背景图像的图像,但我相信这会减慢我的评级系统,无论他们用什么方法,我都可以用颜色填充50%的框,或者我必须用半填充图像本身替换背景。谢谢

3 回复 | 直到 17 年前

Fabian 17 年前

Stephan Muller 17 年前

你所要做的就是确保进度条有固定的宽度、高度和溢出:隐藏。

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

如果你想动态地完成这最后一部分,你只需要javascript。像getElementById('progres').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>

-1

Adrian Ulise Adrian Ulise 11 年前

看看这个背景渐变颜色,并研究它开始时用于主体的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 网站。