将图像覆盖到HTML表格

Question

我对网页设计非常陌生，所以是的，但基本上我有一张桌子，两排，我有一张图像，我想要超过桌子右侧的顶部作为一个半透明的覆盖，我也有引导控制这个网页上的其他元素，所以我不知道如果这是阻止应用样式，但无论如何，这是我的代码，任何指针呢？！

该表最终将在列表中显示数据，该列表将构成“领导者图表”，因此我将其命名为班级“图表”。

<div class="chart"> 
<table class="table"> 
<tr> 
<td>1</td> 
<td>3</td> 
<td>5</td> 
<td>7</td> 
<td>9</td> 
<td>11</td> 
<td>13</td> 
<td>15</td> 
<td>17</td> 
<td>19</td> 
<td>21</td> 
<td>23</td> 
<td>25</td> 
<td>27</td> 
<td>29</td> 
</tr> 
<tr> 
<td>2</td> 
<td>4</td> 
<td>6</td> 
<td>8</td> 
<td>10</td> 
<td>12</td> 
<td>14</td> 
<td>16</td> 
<td>18</td> 
<td>20</td> 
<td>22</td> 
<td>24</td> 
<td>26</td> 
<td>28</td> 
<td>30</td> 
<img src="images/triangle.png" alt="triangle"/> 
</tr> 
</table> 
</div> 

CSS：

.chart {position: relative;} 
.img 
{position: absolute; 
right: 0px; 
top: 0px; 
opacity: 0.9;} 

当在浏览器检测，似乎没有CSS的正被施加到所述.chart或.IMG，图表没有施加到它的CSS和.img只显示默认引导程序css文件设置的边框。

任何指针将不胜感激，谢谢。

Answer 1

您在您的CSS中引用了.img，但标记中没有包含class="img"的元素。我假设您试图在您的代码中将img作为目标，因此您要么将class="img"添加到您的img标记中，要么将您的CSS选择器更改为目标img而不是.img。

.chart CSS看起来不错，但您不会看到任何对您所做的样式更改的视觉指示，因为它只是position: relative。如果您在开发控制台中查看该元素的样式，则应该看到该样式应用于.chart。

.chart { 
 
    position: relative; 
 
} 
 

 
.img { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
    opacity: 0.9; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="chart"> 
 
    <table class="table"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>3</td> 
 
     <td>5</td> 
 
     <td>7</td> 
 
     <td>9</td> 
 
     <td>11</td> 
 
     <td>13</td> 
 
     <td>15</td> 
 
     <td>17</td> 
 
     <td>19</td> 
 
     <td>21</td> 
 
     <td>23</td> 
 
     <td>25</td> 
 
     <td>27</td> 
 
     <td>29</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>4</td> 
 
     <td>6</td> 
 
     <td>8</td> 
 
     <td>10</td> 
 
     <td>12</td> 
 
     <td>14</td> 
 
     <td>16</td> 
 
     <td>18</td> 
 
     <td>20</td> 
 
     <td>22</td> 
 
     <td>24</td> 
 
     <td>26</td> 
 
     <td>28</td> 
 
     <td>30</td> 
 
     <img class="img" src="images/triangle.png" alt="triangle" /> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

有几个问题在这里。

1. 您不能将img放在当前位置。看着你的 css我想我可以看到你想要达到的目标。尝试将其放置在 之后，表格关闭后</table>标签和.chart 关闭</div>标签。您的img元素。 你的css已经为你的img使用了一个类选择器。否则更改 您的css到img而不是.img。

您的实施.chart {position: relative;}看起来不错。这应该肯定会起作用，并应在检查员检查.chart div时出现。

Answer 3

1. 你.chart CSS不会显示任何视觉效果，因为它仅仅是position: relative。但是，如果您想查看该元素的样式参考，请在Chrome或Firefox或Windows或Linux环境中按F12以使用开发者控制台。

2. 另外，我发现你在你的CSS使用.img，但在你的HTML代码class="img"没有元素。因此，如果您试图定位img标签，那么您应该更改CSS选择器，以便使用像这样的父类.chart > img来定位元素img。

现在，在这里你有修改后的代码：

.chart { 
 
    position: relative; 
 
} 
 

 
.chart img { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
    opacity: 0.9; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="chart"> 
 
    <table class="table"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>3</td> 
 
     <td>5</td> 
 
     <td>7</td> 
 
     <td>9</td> 
 
     <td>11</td> 
 
     <td>13</td> 
 
     <td>15</td> 
 
     <td>17</td> 
 
     <td>19</td> 
 
     <td>21</td> 
 
     <td>23</td> 
 
     <td>25</td> 
 
     <td>27</td> 
 
     <td>29</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>4</td> 
 
     <td>6</td> 
 
     <td>8</td> 
 
     <td>10</td> 
 
     <td>12</td> 
 
     <td>14</td> 
 
     <td>16</td> 
 
     <td>18</td> 
 
     <td>20</td> 
 
     <td>22</td> 
 
     <td>24</td> 
 
     <td>26</td> 
 
     <td>28</td> 
 
     <td>30</td> 
 
     <img src="http://i.imgur.com/2RlpzDi.png?1" alt="triangle" /> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 4

感谢所有的答复，他们帮助了很多，甚至当我实现了这个更正后的代码，我仍然不让我的图像坐在桌子的顶部，经过对CSS文件进行了很多故障排除之后，我已经解决了这个问题，结果发现问题在于这个CSS：

.chart { 
position: relative; 
} 

.img { 
position: absolute; 
right: 0px; 
top: 0px; 
opacity: 0.9; 
} 

是这样@media行后：

@media all and (max-width: 768px){ 

我现在已经把CSS的.chart & .IMG之前和完美的作品，三江源。