Html表格背景颜色透明度怎么调，只用HTML和css

Posted 2023-05-15

使用rgba就可以了，background: rgba(255, 255, 255, 0.5);

前面的是三原色，后面的是透明度，0.5就是半透明，

例如

参考技术A html中设置背景和背景颜色的透明度有两种方式：
1.通过rgba方式设置
例如： background:rgba(0,0,0,.5);
优点：可对任意颜色设置透明度
缺点：存在兼容性问题：针对IE9以下浏览器不兼容
2.通过backgroud和opacity设置
例如：background:#000000;
opacity:0.6;
优点：兼容性好
缺点：只针对于背景颜色设置透明度。 参考技术B backgro und-color:tran sprent 参考技术C html中设置背景和背景颜色的透明度有两种方式：
1.通过rgba方式设置
例如： background:rgba(0,0,0,.5);
优点：可对任意颜色设置透明度
缺点：存在兼容性问题：针对IE9以下浏览器不兼容
2.通过backgroud和opacity设置
例如：background:#000000;
opacity:0.6;
优点：兼容性好
缺点：只针对于背景颜色设置透明度。

创建透明的 HTML 表格 [关闭]

【中文标题】创建透明的 HTML 表格 [关闭]

【英文标题】：Create transparent HTML table [closed]

【发布时间】：2015-08-01 19:17:45

【问题描述】：

我想像这个例子一样创建 HTML 表格。

我怎样才能使标题保持灰色并使数据看起来一样？

【参考方案1】：

您只需在要显示的元素上设置背景颜色。

这没有什么复杂的。

table, tbody, tr, th, td  background: transparent; 
thead  background: #aaa; 

【参考方案2】：

试试这个：

CSS:

table 
    border-collapse: collapse;


table th, table thead tr 
    background: #ccc;
    font-weight: bold;


table tr td:first-child 
    font-weight: bold;


table tr td 
    background-color: transparent;

Example HTML:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

JSFiddle

【参考方案3】：

您可以使用 css 设置表格标题的样式

<table>
    <tr>
        <th>header</th>
        <th>header</th>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

th  background-color: #ff0000; 

或者看这个小提琴：http://jsfiddle.net/h4817knp/6/

编辑：为了避免标题中的空白添加

table  border-collapse: collapse; 

到css

http://jsfiddle.net/1yn99g13/1/

【讨论】：

标题单元格之间有间隙，不在问题中。

该代码在语法上不正确

语法错误到底是什么？

所有td和th元素都应该放在<tr></tr>w3schools.com/html/html_tables.asp中

我已经删除了我的反对票:)

【参考方案4】：

当然，你应该使用 CSS：

需要去掉表格中的默认间距：

table 
    border-collapse: collapse;
    border-spacing: 0;

需要设置表头元素的背景颜色：

table thead 
    background-color: lightgrey;  

您需要定义单元格大小：

td 
    width: 100px;  
    height: 25px;

Working Fiddle

table 
    border-collapse: collapse;
	border-spacing: 0;

td 
    width: 100px;  
    height: 25px;

table thead 
    background-color: lightgrey;  

<table>
    <thead>
        <tr>
            <td>HeaderA</td>
            <td>HeaderB</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Value</td>
        </tr>
    </tbody>
</table>

【参考方案5】：

这是一个有效的 sn-p。

border-spacing 删除单元格之间的间距 tr:first-of-type 只针对第一行应用背景颜色 td:nth-child(odd) 仅定位第一列以使所有字段变为粗体

table
  border-spacing:0;


tr:first-of-type
  background:lightgray;
  

td:nth-child(odd)
  font-weight:bold;


th,td
  padding:5px;

<table>
  <tr>
    <td>Plan / Feature</td>
    <td>Standard</td>
  </tr>
  <tr>
    <td>Plan Type</td>
    <td>Annual</td>
  </tr>
  <tr>
    <td>Email Support</td>
    <td>Yes</td>
  </tr>
</table>