كيفية إنشاء خلية الجدول مع خلفية ملونة؟

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

سؤال

أحاول إنشاء خلية جدول HTML مع خلفية نغمة؛ لذلك لدي نص عادي على خلفية صفراء على اليسار والأخضر على اليمين.

الأقرب الذي حصلت عليه حتى الآن على النحو التالي. الخلفية هي بشكل صحيح نصف ونصف، لكن نص المحتوى يزجأ أدناه.

<html>
  <head>
    <style type='text/css'>
      td.green
      {
        background-color: green; 
        padding: 0px; 
        margin: 0px; 
        height:100%;
        text-align:center
      }
      div.yellow
      {
        position:relative; 
        width: 50%; 
        height: 100%;
        background-color:yellow
      }
    </style>
  </head>
  <body style="width: 100%">
    <table style="width: 25%">
      <tr style="padding: 0px; margin: 0px">
        <td class="green">
          <div class="yellow"></div>
          <div class="content">Hello</div> 
        </td>
      </tr>
    </table>
  </body>
</html>

كيف يمكنني إصلاح هذا الأمر؟

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

المحلول

يظهر كل لون بصريا على قدم المساواة، حيث يمكنك الحفاظ على العناصر التي تحدد ألوان الخلفية بنفس المستوى في التعليمات البرمجية بدلا من التعشيش منها. بناء إجابة هارون:

<html>
    <head>
        <style type='text/css'>
            td {
                padding: 0;
                margin: 0;
                text-align: center;
            }
            .container {
                position: relative;
            }
            .bg {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 50%;
            }
            .content {
                position: relative;
                z-index: 1;
            }
            .yellow {
                left: 0;
                background-color: yellow;
            }
            .green {
                right: 0;
                background-color: green;
            }
        </style>
    </head>
    <body style="width: 100%">
        <table style="width: 25%">
            <tr style="padding: 0; margin: 0">
                <td>
                    <div class="container">
                        <div class="content">Hello</div>
                        <div class="bg yellow"></div>
                        <div class="bg green"></div>
                    </div>           
                </td>
            </tr>
        </table>
    </body>
</html>

نصائح أخرى

يجب عليك عش المحتوى DIV في الأصفر DIV:

<div class="yellow"><div class="content">Hello</div></div>

عدل] هذا لديه عيب: سيتم تقتصر الحم الداخلي على الأصفر DIV (أي أنه سيستخدم فقط 50٪ من عرض الصفحة).

لذلك نحن بحاجة إلى آخر div, والمحددة المطلقة ومؤشر Z:

<html>
  <head>
    <style type='text/css'>
      td.green
      {
        background-color: green; 
        padding: 0px; 
        margin: 0px; 
        height:100%;
        text-align:center
      }
      div.yellow
      {
        position:absolute; left:0px; top:0px;
        width: 50%; 
        height: 100%;
        background-color:yellow
      }
      div.container { position:relative; height: 100%; }
      div.content { position:relative; z-index:1; }
    </style>
  </head>
  <body style="width: 100%">
    <table style="width: 25%; height: 150px;">
      <tr style="padding: 0px; margin: 0px">
        <td class="green">
          <div class="container">
          <div class="content">Hello</div> 
          <div class="yellow"></div>
          </div> 
        </td>
      </tr>
    </table>
  </body>
</html>

يعمل مع FF 3.6.

قد يكون من الأسهل استخدام صورة خلفية؟ يمكنك بعد ذلك تطبيق هذا على الخلية.

جرب هذا:

  td.green
  {
    background-color: green;
    padding: 0px;
    margin: 0px;
    height:1em;
    text-align:center
  }
  div.yellow
  {
    width: 50%;
    height: 1em;
    background-color:yellow
  }
  .content {
    margin-top: -1em;
  }

مجرد إنشاء صورة رقيقة طويلة مع لون واحد على اليسار وآخر على اليمين. ثم أعطيه أسلوب مثل ما يلي:

background: url(image) center center repeat-y;

(غير مختبر، ولكن يجب أن يكون شيئا على طول تلك الخطوط: ص

إذا كان TD عرض ثابت، فيمكنك إنشاء صورة ذات بعد يساوي fixedWidth_in_px * 1px واضبط هذه الصورة كخلفية وتعيين كرر الخلفية لتكرار y، بحيث يملأ ارتفاع TD بأكمله. شيء مثل

td.bg
{
    width: 100px;
    height: 100%;
    background: #fff url(imagepath) repeat-y;
}

لحلالي لم يكن لدي أي عناصر أو نصا آخر داخل الخلية، لذلك يمكن استخدام حدود الخلية لجعله تظهر كما لو كان هناك لونين خلفية. لذلك تطبيق كل من هذه الأساليب إلى TD تعيين إلى 50px تظهر مع 2 ألوان خلفية زائفة.

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top