Question

为什么background-image属性不能从CSS文件中起作用，但是如果我在表格的'th'标签内的'style'中使用它？

 table .header {
   background-image: url('Images/bg.png');
   background-repeat: no-repeat;
   border-left: 1px solid #FFF;
   border-right: 1px solid #000;
   border-top: 1px solid #FFF;
   padding-left: 30px;
   padding-top: 8px;
   height: auto;
}

编辑：我的示例表：

               <table id="exampletable" class="tablesorter">
                    <thead>
                        <tr>
                            <th>head1</th>
                            <th>heade2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>body1</td>
                            <td>body2</td>
                        </tr>
                        <tr>
                            <td>body3</td>
                            <td>body4</td>
                        </tr>
                    </tbody>

                </table>

我在site.master中链接了css文件（我在asp web app中）

Answer 1

在图片

之前添加../

table .header {
   background-image: url('../Images/bg.png');
   background-repeat: no-repeat;
   border-left: 1px solid #FFF;
   border-right: 1px solid #000;
   border-top: 1px solid #FFF;
   padding-left: 30px;
   padding-top: 8px;
   height: auto;
}

如果Images和content并排放在文件夹

中

Answer 2

是＆＃34;标题＆＃34;你的桌子的班级？在这种情况下，你的css中没有空格：

table.header {
   ...
}

Answer 3

假设这是您的表格，<th>是您的header

<table border="1">
   <th>Column 1</th>
   <tr>
      <td>Value 1</td>
   </tr>
</table>

使用这种css：

th{
   background-image: url('Images/bg.png'); //or ('../Images/bg.png');
   background-repeat: no-repeat;
   border-left: 1px solid #FFF;
   border-right: 1px solid #000;
   border-top: 1px solid #FFF;
   padding-left: 30px;
   padding-top: 8px;
   height: auto;
}

请参阅Fiddle Demo

Answer 4

你可以像我的例子那样给它一个类，然后调用你的css

<table id="exampletable" class="tablesorter">
                        <thead class="sample">
                            <tr>
                                <th>head1</th>
                                <th>heade2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>body1</td>
                                <td>body2</td>
                            </tr>
                            <tr>
                                <td>body3</td>
                                <td>body4</td>
                            </tr>
                        </tbody>

                    </table>


.sample {
   background-image: url('Images/bg.png');
   background-repeat: no-repeat;
   border-left: 1px solid #FFF;
   border-right: 1px solid #000;
   border-top: 1px solid #FFF;
   padding-left: 30px;
   padding-top: 8px;
   height: auto;

}

表头背景图像在CSS文件中不起作用

4 个答案: