4

我正在尝试创建一个具有两种色调背景的 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>

我该如何解决这个问题？

4

7 回答 7

6

您必须将内容嵌套DIV在黄色中DIV：

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

[编辑] 这有一个缺陷：内部 DIV 将被限制为黄色DIV（即它只会使用页面宽度的 50%）。

所以我们需要另一个div绝对定位和 z-index：

<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。

于 2010-03-15T09:54:07.840 回答
4

从视觉上看，每种颜色看起来都是一样的，因此理想情况下，您应该在代码中维护将背景颜色设置在同一级别的元素，而不是嵌套它们。建立亚伦的答案：

<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>
于 2010-03-15T11:10:59.037 回答
1

使用背景图像可能更容易？然后，您可以将其应用于单元格。

于 2010-03-15T09:50:37.597 回答
0

试试这个：

  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;
  }
于 2010-03-15T09:51:33.320 回答
0

只需创建一个长而细的图像，左边一种颜色，右边另一种颜色。然后给它一个类似下面的样式：

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

（未经测试，但应该是类似的东西：p

于 2010-03-15T09:53:01.733 回答
0

如果 td 的宽度是固定的，那么您可以制作一个尺寸等于的图像fixedWidth_in_px * 1px并将此图像设置为背景并将 background-repeat 设置为 repeat-y，以便它填充 td 的整个高度。就像是

td.bg
{
    width: 100px;
    height: 100%;
    background: #fff url(imagepath) repeat-y;
}
于 2010-03-15T10:03:56.577 回答
0

对于我的解决方案，单元格内没有其他元素或文本，因此可以使用单元格的边框使其看起来好像有 2 种背景颜色。因此，将这两种样式应用于 td 设置为 50px 会出现 2 种伪背景颜色。

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
于 2014-05-21T04:04:36.333 回答