Tôi muốn có thanh tiến trình XHTML + CSS với màu tương phản giữa các vùng nền trống và trống.Màu văn bản thanh tiến trình CSS cho hình nền trống và tương phản trống?
Tôi gặp sự cố với màu văn bản. Bởi vì nền đầy và trống là quá tương phản (đây là một yêu cầu), để vẫn có thể đọc được văn bản nên được hai màu để được tương phản với cả hai người trong số họ. Hình ảnh nên giải thích nó tốt hơn so với dòng chữ:
Progress bar with dark blue filled area and white empty background http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Example of the problem http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png
hiện thực hiện thanh tiến trình của tôi là tầm thường, nhưng như ví dụ trên cho thấy, các văn bản có thể được khó khăn để đọc trong một số trường hợp, đó là chính xác một vấn đề Tôi muốn giải quyết.
hiện nỗ lực thực hiện (giản thể) của tôi (thất bại, vì overflow: hidden không hoạt động mà không cần định vị div.progress mà tôi không thể vị trí vì nội span 's 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>
sống phiên bản của trên: http://drdaeman.pp.ru/tmp/20090703/test2.html
nỗ lực trước: http://drdaeman.pp.ru/tmp/20090703/test.html
Các hình ảnh nguyên mẫu GIMP chỉnh sửa, và không chính xác những gì đang hiển thị này.
Thêm: Cảm ơn tất cả các bạn, đặc biệt là Meep3D, Nosredna và Lachlan! Tuy nhiên, tôi vẫn gặp sự cố - trong thanh tiến trình của trường hợp của tôi không có chiều rộng cố định và tất cả không gian có sẵn theo chiều ngang (width: auto; hoặc width: 100% đều được chấp nhận). Nhưng không có quy tắc mã số của Lachlan mà không có quy tắc width: 400px. Và tôi vẫn muốn tránh sử dụng JavaScript, nếu có thể.
Điều gì chính xác là vấn đề với 0% và 100%? – Nosredna
Hoặc là văn bản màu đen trên nền màu xanh đậm (rất khó đọc) hoặc văn bản màu trắng trên nền trắng (không thể đọc được). – drdaeman
Tôi phải thiếu điều gì đó. Tại sao không làm cho nó trắng khi nó trên màu xanh đậm và đen khi nó trên màu trắng? – Nosredna