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>

显示的效果：

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

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

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

IE9+ 使用background:rgba()
要是需要兼容低版本浏览器就用半透明的png吧

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

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

【热门文章】