-2 
<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中设置了交替颜色。即第一行是白色的，第二行是黄色的。问题是第二行的按钮也变成了黄色。我已将不透明度设置为 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>
4

2 回答 2

2

opacity使您的元素透明。不透明度0.5将使元素看起来 50% 透明。

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

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

例子

如果您希望您的按钮在保持其不透明度的同时具有不同颜色的背景，您可以将其包装在 a 中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 示例。

于 2013-05-23T10:58:23.760 回答
0

试试这个：

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

例如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>
于 2013-05-23T11:01:21.800 回答