![](/img/trans.png)
[英]Css - background-img url no-repeat center center Not working
[英]CSS background image no-repeat only working in Firefox
.myclass{
background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
background-repeat: no-repeat;
background-size:contain;
background-position: 1.5%;
}
我表的所有行(tr)都具有myclass類: <tr class="myclass">
在Firefox中,圖像僅顯示在表第一列的所有單元格中,但在chrome和Opera中,表的所有單元格都具有此類背景圖。 如何確保僅在chrome和Opera中的第一列中顯示?
這是html:
<table>
<tr class="myclass">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="myclass">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
像這樣設置
.myclass td:first-child {
background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
background-repeat: no-repeat;
background-size:contain;
background-position: 1.5%;
}
添加.myclass
只有第一th
& td
.myclass{ background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg'); background-repeat: no-repeat; background-size:contain; background-position: 1.5%; }
<table> <tr > <th class="myclass">Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td class="myclass">Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.