Как создать ячейку таблицы с двухцветным фоном?
-
20-09-2019 - |
Вопрос
Я пытаюсь создать ячейку таблицы 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 будет ограничен желтым 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;
(Непроверено, но должно быть что-то в этом роде : p
Если td имеет фиксированную ширину, то вы можете создать изображение размером, равным fixedWidth_in_px * 1px
и установите это изображение в качестве фона и установите background-repeat на repeat-y, чтобы оно заполняло всю высоту td.Что - то вроде
td.bg
{
width: 100px;
height: 100%;
background: #fff url(imagepath) repeat-y;
}
Для моего решения у меня не было других элементов или текста внутри ячейки, поэтому я мог использовать границу ячейки, чтобы она выглядела так, как будто есть 2 цвета фона.Таким образом, применение обоих этих стилей к td, установленному в 50 пикселей, отображается с двумя псевдоцветами фона.
.halfleft_casual {
border-right:25px solid blue;
}
.halfleft_member {
border-right:25px solid green;
}