Javascript CSS中的颜色重叠雇员薪水 EMP1 10000 EMP2 12000_Javascript_Jquery_Css

Javascript CSS中的颜色重叠雇员薪水 EMP1 10000 EMP2 12000

javascript jquery css

Javascript CSS中的颜色重叠雇员薪水 EMP1 10000 EMP2 12000,javascript,jquery,css,Javascript,Jquery,Css,我已经在css中设置了交替颜色。第一排是白色的，第二排是黄色的。问题是第二行的按钮也变为黄色。我已将不透明度设置为0.5，以便在页面加载时显示为灰色。如何消除这种颜色重叠 <table border="1" class="sample"> <tr> <th>Employee</th> <th>Salary</th> <th></th> </tr> <tr> <td

我已经在css中设置了交替颜色。第一排是白色的，第二排是黄色的。问题是第二行的按钮也变为黄色。我已将不透明度设置为0.5，以便在页面加载时显示为灰色。如何消除这种颜色重叠

<table border="1" class="sample">

<tr>
<th>Employee</th>
<th>Salary</th> 
<th></th>
</tr>

<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>

<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>


表1.样本{
边框：6px插图#8B8378；
-moz边界半径：6px；
}
表1.1样本td{
边框：1px纯黑；
填充物：0.2em 2ex 0.2em 2ex；
颜色：黑色；
}
表4.1 tr.d0 td样本{
背景色：#FCF6CF；
}
表1.1 tr.d1 td样本{
背景色：#FEFEF2；
}

使您的元素清晰可见。不透明度

0.5

将使元素显示为50%透明

通过

输入

可以看到背景色的原因是输入具有这种不透明度。你基本上是在问“我在我的房子里加了一扇窗户，但我能看穿它，我怎样才能防止这种情况发生？”答案很简单：去掉不透明度

下面是一个JSFIDLE演示，显示了0.0不透明度、0.5不透明度和无不透明度

如果您希望按钮具有不同颜色的背景，同时保持其不透明度，您可以将其包裹在

span

中，然后为该span提供背景：

<style type="text/css">
table.sample {
    border: 6px inset #8B8378;
    -moz-border-radius: 6px;
}
table.sample td {
    border: 1px solid black;
    padding: 0.2em 2ex 0.2em 2ex;
    color: black;
}
table.sample tr.d0 td {
    background-color: #FCF6CF;
}
table.sample tr.d1 td {
    background-color: #FEFEF2;
}
</style>

试试这个：

td span { background:#fff; } /* New button background colour */
td span input { margin:0; }  /* Remove the button's margins */

例如


桌子{
边框：6px插图#8B8378；
-moz边界半径：6px；
}
表td{
边框：1px纯黑；
填充物：0.2em 2ex 0.2em 2ex；
颜色：黑色；
}
表tr td{
背景色：#FCF6CF；
}
表tr td{
背景色：#FEFEF2；
}
输入{color:rgba（0,0,0,0.5）；}
雇员
薪水
EMP1
10000
EMP2
12000

能否请您提供CSS并详细说明为什么您首先将按钮的不透明度设置为0.5？“我已将该按钮的不透明度设置为0.5。如何删除此颜色重叠？”简单。。。移除不透明度！“不透明度”（Opacity）小于1将使元素部分透明。你还期望发生什么？也许你应该选择一种合适的颜色。谢谢你，拉尔夫！谢谢你的快速回复。但我想要不透明度，但仍然想删除颜色。这是可能的吗？不透明度意味着元素下面的东西会发光。因此，如果你想让TR的背景色以外的东西通过你的按钮发光，那么你必须在你的按钮后面放置其他东西。在你的问题中，你不清楚你想要实现什么。。。你希望它是透明的，但你不想透过它看到背景。。。那就不要让它透明。。你想让按钮变成灰色吗？把它设成灰色。。你想禁用它吗？设置输入“禁用”（）谢谢，有没有其他方法不使用不透明度来实现这一点？我的意思是，我希望按钮的灰度输出效果（如禁用）相当于0.5不透明度？您可以为特定单元格设置白色背景，但这看起来有点奇怪

table.sample tr td:nth child（3）{background:#fff；}

@User我使用

span

添加了一个新示例。这会解决你的问题。你不会看穿我发布的内容。将bg颜色更改为黑色作为测试。确保移除不透明度。

td span { background:#fff; } /* New button background colour */
td span input { margin:0; }  /* Remove the button's margins */

input {color: rgba(0,0,0,0.5);}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

table {
    border: 6px inset #8B8378;
    -moz-border-radius: 6px;
}
table td {
    border: 1px solid black;
    padding: 0.2em 2ex 0.2em 2ex;
    color: black;
}
table tr td {
    background-color: #FCF6CF;
}
table tr td {
    background-color: #FEFEF2;
}

input {color: rgba(0,0,0,0.5);}

</style>

</head>
<body>

<table border="1" class="simple">

<tr>
<th>Employee</th>
<th>Salary</th> 
<th></th>
</tr>

<tr>
<td>EMP1</td>
<td>10000</td>
<td><input id="btn1" type="button" value="Submit">
</tr>

<tr>
<td>EMP2</td>
<td>12000</td>
<td><input id="btn2" type="button" value="Submit"></td>
</tr>
</table>

</body>
</html>