gpt4 book ai didi

html - 如何禁用边框颜色与单元格背景的对比?

转载 作者:太空宇宙 更新时间:2023-11-04 08:01:43 24 4
gpt4 key购买 nike

HTML 边框的默认行为似乎与单元格背景颜色不同,强加某种对比度,覆盖已定义的边框颜色。我试图追踪问题以关闭此覆盖,但找不到它的来源。

下面的例子演示了这个问题:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-color: lightgray;
}

.lav {
background-color: lavender;
}

.medBlue {
background-color: mediumblue;
}
<body>
<table>
<tr class="lav">
<th>Firstname</th>
<th>_</th>
<th>Lastname</th>
</tr>
<tr class="lav">
<td>Peter</td>
<td>_</td>
<td>Griffin</td>
</tr>
<tr class="medBlue">
<td>Lois</td>
<td>_</td>
<td>Griffin</td>
</tr>
</table>
</body>

正如预期的那样,前两行的边框颜色为浅灰色。但是,具有较暗背景的第三行的边框颜色被不同的颜色覆盖。

如何使表格中的边框颜色统一?

问了一个类似的问题here ,但我认为这个问题与透明度无关(至少,较暗单元格上的边框颜色会更暗,而不是更亮)。

这个问题似乎与缩放程度有关,这让我相信这是浏览器在边框宽度(任意?)被认为太小时做出的修正。换句话说,当放大表格时,颜色会更改为预期的颜色。一种解决方法是简单地使边框变粗,但我想避免这种情况。当使用 PhantomJS 加载此类表格并随后对其进行截图时,问题仍然存在,这正是我需要此代码的原因。

最佳答案

你唯一能做的就是增加边框颜色的暗度来取悦眼睛。 .medBlue td {边框颜色:灰色;

table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-color: lightgray;
}

.lav {
background-color: lavender;
}

.medBlue {
background-color: mediumblue;
}
.medBlue td {
border-color: gray;
}
<body>
<table>
<tr class="lav">
<th>Firstname</th>
<th>_</th>
<th>Lastname</th>
</tr>
<tr class="lav">
<td>Peter</td>
<td>_</td>
<td>Griffin</td>
</tr>
<tr class="medBlue">
<td>Lois</td>
<td>_</td>
<td>Griffin</td>
</tr>
</table>
</body>

关于html - 如何禁用边框颜色与单元格背景的对比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46961480/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com