html 表格设置图片背景透明,table标签怎么实现内容不透明,背景图片透明

代码是这样的

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>课程表</title>

</head>

<body>

<div class=”container”>

<table border=”1″ cellpadding=”10″ background=”test.jpg”

align=”center”

style=”background-size: 100%; opacity: 0.5; filter: alpha(opacity = 30);”>

<caption>中学生课程表</caption>        <!–标题 –>

<tr>

<th>项目</th>

<th colspan=”5″>上课</th>

<th colspan=”2″>周末</th>

</tr>

<tr>

<th>星期</th>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

<th>星期六</th>

<th>星期日</th>

</tr>

<tr>

<th>第一节</th>

<td>语文</td>

<td>数学</td>

<td>物理</td>

<td>化学</td>

<td>政治</td>

<td>英语</td>

<td rowspan=”4″>休息</td>

</tr>

<tr>

<th>第二节</th>

<td>语文</td>

<td>数学</td>

<td>物理</td>

<td>化学</td>

<td>政治</td>

<td>英语</td>

</tr>

<tr>

<th>第三节</th>

<td>语文</td>

<td>数学</td>

<td>物理</td>

<td>化学</td>

<td>政治</td>

<td>英语</td>

</tr>

<tr>

<th>第四节</th>

<td>语文</td>

<td>数学</td>

<td>物理</td>

<td>化学</td>

<td>政治</td>

<td>英语</td>

</tr>

</table>

</div>

</body>

</html>

显示的效果:

《html 表格设置图片背景透明,table标签怎么实现内容不透明,背景图片透明》

这样的话,表格的内容和背景图片都虚了,我只想让背景图片透明,内容文字不透明。css该怎么写?

IE9+

使用

background:rgba()

要是需要兼容低版本浏览器就用半透明的

png

给文字外面包裹一层元素 ,然后给这层元素(span)设置透明度。

<td><span>语文</span></td>

一楼正解,或者在课程表下面定位一个div将背景给他然后设置透明度

一楼是解决方案。做张半透明的背景图就可以了。

《html 表格设置图片背景透明,table标签怎么实现内容不透明,背景图片透明》

    原文作者:Gistie
    原文地址: https://blog.csdn.net/weixin_33180243/article/details/117846363
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞