drd*_*man 7 css text effects progress-bar
我希望XHTML + CSS进度条在填充和空白背景区域之间具有对比色.
我的文字颜色有问题.因为填充和空白背景太对比(这是一项要求),为了保持可读性,文本应该是双色的,以便与它们两者形成对比.图像应该比文字更好地解释:
进度栏与深蓝色填充区域和白色空背景http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png 问题示例http://drdaeman.pp.ru/tmp/ 20090703 /进度条,文本problem.png
我当前的进度条实现是微不足道的,但是如上面的例子所示,在某些情况下文本可能很难阅读,这正是我想要解决的问题.
我目前的(简化的)实现尝试(失败,因为overflow: hidden没有定位div.progress我无法定位,因为内部span的位置width):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Progress bar test</title>
<style type="text/css">
div.progress_bar {
border: 1px #ccc solid; position: relative;
text-align: center; height: 32px;
}
div.progress_bar .progress {
height: 32px;
overflow: hidden; /* This does NOT work! */
}
div.progress_bar .progress div {
position: absolute; width: 100%; height: 32px;
z-index: 30; overflow: hidden;
background-color: #44a;
}
div.progress_bar span {
position: absolute; top: 0; left: 0; width: 100%;
z-index: 20;
color: #000;
}
div.progress_bar .progress span {
position: absolute; top: 0; left: 0; width: 100%;
z-index: 40;
color: #eee;
}
</style>
</head>
<body>
<!-- Can be of any (unknown) width. Think of "width: auto".
The 400px value is just to keep it small on a big monitor.
DON'T rely on it! -->
<div id="container" style="width: 400px;">
<div class="progress_bar">
<!-- div.progress is a dark filled area container -->
<div class="progress" style="width: 51%;">
<!-- Actually dark filled area -->
<div style="width: 51%;"></div>
<!-- Text (white).
Does not clip, even with overflow: hidden on parent! -->
<span>This is a test</span>
</div>
<!-- Text (black) -->
<span>This is a test</span>
</div>
</div>
</body>
</html>
以上的实时版本:http://drdaeman.pp.ru/tmp/20090703/test2.html
以前的尝试:http://drdaeman.pp.ru/tmp/20090703/test.html
这些图像是GIMP编辑的原型,而不是这段代码显示的内容.
补充:谢谢大家,特别是Meep3D,Nosredna和Lachlan!但是我仍然有一个问题 - 在我的情况下,进度条应该没有固定宽度并占用所有水平可用空间(width: auto;或width: 100%可接受).但没有width: 400px规则Lachlan的代码中断.如果可能的话,我仍然希望避免使用JavaScript.
如果将进度条文本的第二个副本放在div中,并将div的溢出设置为隐藏,那么它会显示出来吗？
-
更新:我也不是一个JavaScript专家,但我相信你可以找到一个对象的宽度,然后根据宽度是如你所说的那样灵活设置偏移量.
根据Meep3D的建议,请取2份文本.
将每个包裹在与容器相同宽度的div中."upper"div用另一个div包裹,该div以所需的百分比剪辑.
更新:删除固定宽度.
"upper"div的大小与其包装器的反比例大小相同.
<html>
<head>
<style type="text/css">
#container {
position: relative;
border: 1px solid;
text-align: center;
width: 400px;
height: 32px;
}
.black-on-white {
height: 32px;
color: #000;
}
.white-on-black {
height: 32px;
color: #fff;
background-color: #44a;
}
.wrapper {
width: 53%;
overflow: hidden;
position: absolute;
top: 0; left: 0;
}
.black-on-white {
width: 100%;
}
.white-on-black {
width: 188.7%;
}
</style>
</head>
<body>
<div id="container">
<div class="wrapper">
<div class="white-on-black">
<span>This is a test</span>
</div>
</div>
<div class="black-on-white">
<span>This is a test</span>
</div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
4749 次 |
| 最近记录： |