Question

我正在使用webgrid来显示数据并且它在替代中显示数据，并且我在其中一行中对背景颜色进行了硬编码，并且它与一个工作正常，但与另一个工作正常，我＆＃ 39;我不确定这是否是正确的做法。

我的问题是：如何让它对背景透明？

这是图片：

enter image description here

这是源代码：

<tr class="webgrid-row-style">            
            <td><input readonly name="rowNumber_0" value="1" style="width:40px;border:0; background-color:#F5F5F5;" /></td>
            <td><input type="text" id="Location" name="location_0" value="DATA CENTER" style="width:250px;" /></td>
            <td><input type="text" id="RackShelf" name="rack_0" value="23" style="width:50px;"/></td>
            <td><input type="text" id="DCLocation" name="dcLocation_0" value="71-"   /></td>
            <td><input type="text" id="Customer" name="customer_0" value="worth" style="width:250px;" /></td>
            <td><input type="text" id="SerialNumber" name="serialNumber_0" value="5" /></td>
            <td><input type="text" id="Location" name="location_0" value="DATA CENTER" /></td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td><input readonly name="rowNumber_1" value="2" style="width:40px;border:0; background-color:#F5F5F5;" /></td>
            <td><input type="text" id="Location" name="location_1" value="DATA CENTER" style="width:250px;" /></td>
            <td><input type="text" id="RackShelf" name="rack_1" value="9" style="width:50px;"/></td>
            <td><input type="text" id="DCLocation" name="dcLocation_1" value="BD37:"   /></td>
            <td><input type="text" id="Customer" name="customer_1" value="Family Services" style="width:250px;" /></td>
            <td><input type="text" id="SerialNumber" name="serialNumber_1" value="USE" /></td>
            <td><input type="text" id="Location" name="location_1" value="DATA CENTER" /></td>
        </tr>

// CSS

 .webgrid-row-style {
        padding: 3px 7px 2px;
        background-color: #FFFFFF;
    }

    .webgrid-alternating-row {
        background-color: #F5F5F5;
        padding: 3px 7px 2px;
    }

Answer 1

您可以使用：

background-color: transparent;

两者，

.webgrid-row-style, .webgrid-alternating-row {
    background-color: transparent
}

由于您在每个input中使用td，因此也要添加此样式

.webgrid-row-style td input, .webgrid-alternating-row td input{
    background-color: transparent
}

background-color

Answer 2

如果您只想让输入与其父级（td）具有相同的背景色，则可以使用background-color:inherit

.webgrid-row-style {
        padding: 3px 7px 2px;
        background-color: #FFFFFF;
    }

    .webgrid-alternating-row {
        background-color: #F5F5F5;
        padding: 3px 7px 2px;
    }

<table border="0">
<tr class="webgrid-row-style">            
            <td><input readonly name="rowNumber_0" value="1" style="width:40px;border:0; background-color:inherit" /></td>
            <td><input type="text" id="Location" name="location_0" value="DATA CENTER" style="width:250px;" /></td>
            <td><input type="text" id="RackShelf" name="rack_0" value="23" style="width:50px;"/></td>
            <td><input type="text" id="DCLocation" name="dcLocation_0" value="71-"   /></td>
            <td><input type="text" id="Customer" name="customer_0" value="worth" style="width:250px;" /></td>
            <td><input type="text" id="SerialNumber" name="serialNumber_0" value="5" /></td>
            <td><input type="text" id="Location" name="location_0" value="DATA CENTER" /></td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td><input readonly name="rowNumber_1" value="2" style="width:40px;border:0; background-color:inherit;" /></td>
            <td><input type="text" id="Location" name="location_1" value="DATA CENTER" style="width:250px;" /></td>
            <td><input type="text" id="RackShelf" name="rack_1" value="9" style="width:50px;"/></td>
            <td><input type="text" id="DCLocation" name="dcLocation_1" value="BD37:"   /></td>
            <td><input type="text" id="Customer" name="customer_1" value="Family Services" style="width:250px;" /></td>
            <td><input type="text" id="SerialNumber" name="serialNumber_1" value="USE" /></td>
            <td><input type="text" id="Location" name="location_1" value="DATA CENTER" /></td>
        </tr>
  </table>

另请注意，尽可能避免使用内联样式。

Answer 3

这个CSS应该这样做：

tr.webgrid-row-style td input {
  background: transparent;
}

注意：如果您使用的是谷歌浏览器（您可能应该），请右键单击该元素并单击“检查元素”。 Chrome的开发人员工具打开后，右键单击该元素，您可以直接从那里复制它的CSS路径（当您不确定如何使用CSS定位DOM元素时）。

Answer 4

你总是可以使用背景颜色：rgba（c值，c值，c值，alpha值）

background-color: rgba(245,245,245,0.5);

如上所述，使用rgba可以指定alpha颜色。

Answer 5

从元素中删除css

Demo

<tr class="webgrid-row-style">
    <td>
        <input readonly name="rowNumber_0" value="1" style="width:40px;border:0;" />
    </td>
    <td>
        <input type="text" id="Location" name="location_0" value="DATA CENTER" style="width:250px;" />
        </t <td>
        <input type="text" id="RackShelf" name="rack_0" value="23" style="width:50px;" />
    </td>
    <td>
        <input type="text" id="DCLocation" name="dcLocation_0" value="71-" />
    </td>
    <td>
        <input type="text" id="Customer" name="customer_0" value="worth" style="width:250px;" />
    </td>
    <td>
        <input type="text" id="SerialNumber" name="serialNumber_0" value="5" />
    </td>
    <td>
        <input type="text" id="Location" name="location_0" value="DATA CENTER" />
    </td>
</tr>
<tr class="webgrid-alternating-row">
    <td>
        <input readonly name="rowNumber_1" value="2" style="width:40px;border:0;" />
    </td>
    <td>
        <input type="text" id="Location" name="location_1" value="DATA CENTER" style="width:250px;" />
    </td>
    <td>
        <input type="text" id="RackShelf" name="rack_1" value="9" style="width:50px;" />
    </td>
    <td>
        <input type="text" id="DCLocation" name="dcLocation_1" value="BD37:" />
    </td>
    <td>
        <input type="text" id="Customer" name="customer_1" value="Family Services" style="width:250px;" />
    </td>
    <td>
        <input type="text" id="SerialNumber" name="serialNumber_1" value="USE" />
    </td>
    <td>
        <input type="text" id="Location" name="location_1" value="DATA CENTER" />
    </td>
</tr>

css

.webgrid-row-style input:not([type]) {
    padding: 3px 7px 2px;
    background-color: transparent;
}
.webgrid-alternating-row input:not([type]) {
    background-color: #F5F5F5;
    padding: 3px 7px 2px;
}

如何使背景颜色透明

5 个答案: