CSS شريط التقدم لون النص المقابل مملوءة وفارغة الخلفيات ؟

StackOverflow https://stackoverflow.com/questions/1080708

سؤال

أريد أن يكون XHTML+CSS شريط التقدم مع تباين الألوان بين مملوءة وفارغة المناطق الخلفية.

لدي مشكلة مع لون النص.لأن شغل و خلفيات فارغة جدا المقابل (هذا شرط) أن تظل قراءة النص ينبغي أن تكون مزدوجة الألوان أن تكون النقيض من كل منهم.الصورة يجب أن يفسر أنه أفضل من الكلمات:

شريط التقدم مع الأزرق الداكن شغل مساحة بيضاء فارغة الخلفية http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png مثال على المشكلة http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png

بلدي الحالي شريط التقدم تنفيذ تافهة, ولكن كما في المثال أعلاه يظهر النص يمكن أن يكون من الصعب قراءة في بعض الحالات ، وهو بالضبط مشكلة اريد حلها.

بلدي الحالي (المبسطة) تنفيذ محاولة (فشل, لأن overflow: hidden لا يعمل بدون تحديد المواقع div.progress الذي لا أستطيع أن موقف بسبب الداخلي 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>

نسخة حية من المذكور أعلاه: http://drdaeman.pp.ru/tmp/20090703/test2.html
محاولة سابقة: http://drdaeman.pp.ru/tmp/20090703/test.html

الصور GIMP تحرير النماذج ، وليس بالضبط ما يعرض هذا الرمز.

إضافة: شكرا لكم جميعا وخصوصا Meep3D, Nosredna و اكلان!ومع ذلك لا يزال لدي مشكلة في حالتي شريط التقدم يجب أن يكون أي عرض ثابت واتخاذ جميع أفقيا المساحة المتاحة (width: auto; أو width: 100% مقبولة).ولكن من دون width: 400px القاعدة لاكلان رمز فواصل.وأنا لا تزال ترغب في تجنب استخدام جافا سكريبت ، إذا كان ذلك ممكنا.

هل كانت مفيدة؟

المحلول

كما في Meep3D اقتراح تأخذ 2 نسخ من النص.

التفاف كل في شعبة من نفس عرض الحاوية."العليا" div ملفوفة مع آخر div والتي مقاطع في النسبة المئوية المطلوبة.

تحديث:إزالة الاعراض الثابتة.
"العليا" 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>

نصائح أخرى

ماذا عن وضع نسخة ثانية من شريط التقدم النص داخل شعبة ، وتعيين div تجاوز الخفية ، لذلك فإنه يكشف عن ذلك ؟

--

تحديث:أنا أيضا لا جافا سكريبت الخبراء, ولكن أنا متأكد من أن يمكنك أن تجد العرض من كائن ومن ثم تحديد التعويض استنادا إلى أنه إذا عرض مرنة كما تقول.

هل يمكن أن:

  • العثور على الرمادي التي تناسب
  • استخدام جافا سكريبت لتغيير لون بين الأبيض والأسود بشكل حيوي اعتمادا على حيث هو
  • جعل الوسط لون الخلفية التدرج أقرب إلى الأبيض ، دائما استخدام النص الظلام
  • وضع التقدم outisde المربع:
[#########              ] 50 %

يمكنك استخدام النص الظل "النسبة المئوية" النص.الجانب السلبي الوحيد لهذا هو أن تعمل فقط في أحدث المتصفحات.فقط فايرفوكس 3.5 ، سفاري (جميع الإصدارات) ، والكروم 2+ الدعم لها.

هنا هو عرض من استخدام النص الظل بطريقة من شأنها أن تجعل التقدم المحرز الخاص بك للقراءة.
http://www.w3.org/Style/Examples/007/text-shadow#white

إذا كنت على استعداد لاستخدام المزيد من جافا سكريبت يمكنك أن تجرب هذا البرنامج المساعد مسج:

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

يقول المقال يعمل في IE فقط ، ومع ذلك يعمل في كروم 3 (ما أنا باستخدام), Firefox 3.5, انترنت اكسبلورر, و سفاري.قد تعمل في المتصفحات القديمة لكن لم أجربها.

Meep3D لديه الإجابة الصحيحة.نسختين من مربع.تكشف n% من رأس واحد.

المزيد من الخيارات:

  • وضع شفاف مربع تحت عدد إما أن يظلم المنطقة بالنسبة وعدد البيض أو يخفف منطقة لعدد الأسود.
  • استخدام أحمر و أبيض مثل الخلفيات ، عدد سوداء.(المشكلة هنا هو الأحمر ويرتبط مع الخطأ ، حتى تتمكن من اللعب مع مجموعات أخرى من ثلاثة الألوان كلها عالية التباين ضد بعضها البعض.)
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top