Question

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

我在css中设置了交替颜色。那是第一行是白色，第二行是黄色。问题是第二行的按钮也变黄了。我已将Opacity设置为0.5，因此它在页面加载时显示为灰色。如何删除此颜色重叠？

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

Answer 1

opacity让您的元素透视。不透明度0.5会使元素显示为50％透视。

您可以通过input查看背景颜色的原因是您的输入具有此不透明度。你基本上都在问“我已经为我的房子添加了一个窗口，但是我可以看到它，我怎么能阻止它？”，答案很简单：删除不透明度。

这是一个JSFiddle演示，显示0.0不透明度，0.5不透明度和不透明度：http://jsfiddle.net/JamesD/UQ48z/1。

Example

如果您希望按钮具有不同颜色的背景，同时保持其不透明度，您可以做的是将其包裹在span中，然后将该跨度作为背景：

<td>
    <span>
        <input id="btn2" type="button" value="Submit">
    </span>
</td>

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

JSFiddle example

Answer 2

请改为尝试：

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

E.g。 http://codepen.io/pageaffairs/pen/gGIiw

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

CSS中的颜色重叠

2 个答案: