[英]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%;
}
All my rows (tr) of the table have the class myclass: <tr class="myclass">
In Firefox the image is only displayed in all cells of the first column of the table but in chrome and opera all cells of table have this background image. 我表的所有行(tr)都具有myclass类: <tr class="myclass">
在Firefox中,图像仅显示在表第一列的所有单元格中,但在chrome和Opera中,表的所有单元格都具有此类背景图。 What to do to make sure it shows only in the first column in chrome and opera as well? 如何确保仅在chrome和Opera中的第一列中显示?
Here is the html: 这是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>
Set it up like this 像这样设置
.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%;
}
http://codepen.io/brianmtreese/pen/XKwvqX http://codepen.io/brianmtreese/pen/XKwvqX
Add .myclass
only first th
& td
添加.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.