CSS - 如何创建一个具有双色背景的表单元格？ [英] CSS - How to create a table cell with a two-colour background?
本文介绍了CSS - 如何创建一个具有双色背景的表单元格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试创建一个具有双色背景的HTML表格单元格;所以我在背景上有正常的文本，在左边是黄色的，在右边是绿色的。
I'm trying to create an HTML table cell with a two-tone background; so I have normal text on a background which is yellow on the left, and green on the right.
我到目前为止最接近的如下。背景是正确的一半，但内容文本被移位在它下面。
The closest I've got so far is as follows. The background is correctly half-and-half, but the content text is displaced below it.
<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>
如何解决这个问题？
推荐答案
视觉上每个颜色都显示为相等，所以理想情况下，你会维护的背景颜色设置在同一级别的代码，而不是嵌套的元素。建立Aaron的回答：
Visually each colour appears as equals so ideally you'd maintain the elements that set the background colours at the same level in the code instead of nesting them. Building off Aaron's answer:
<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>
这篇关于CSS - 如何创建一个具有双色背景的表单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
