表格行的背景图像将自身切成两半答案

【问题标题】：Background image of table row cutting itself into half表格行的背景图像将自身切成两半
【发布时间】：2013-05-21 18:35:07
【问题描述】：

我有一个名为 logo 的表格行类，带有属性

.logo { background: url("img/logo.png") no-repeat left top !important; }

现在我确实在每一行的左上角都有一个图像，但我在这里想要完成的是把图像移出table row，这样一半的图像在`table 之外，一半在表。

我把我的班级改成了

.logo { background: url("img/logo.png") no-repeat -12px top !important; }

并在表格行中获得一半的图像，但表格外的图像部分消失了（看不到它）。

我尝试过使用z-index、position 属性，但没有任何效果。有人可以指导我如何获得所需的行为吗？

注意： 在 Firefix 20.0.1 中测试它谢谢

【问题讨论】：

我想你可能误解了一些 CSS 的东西，你能在 jsfiddle.net 上做一个例子吗，请除非绝对必要，否则不要使用!important。跨度>
您是否希望某些元素的背景出现在元素本身所在位置以外的其他位置？那是行不通的。把图片剪成两半，用一半作为桌子左边的背景。
当然，背景图片不会显示在元素的尺寸之外……噢！
我试图复制一些流行网站（如 ebay）所使用的行为，它们在图片上有一些标志，一半在图片上，一半在外面。无论如何，任何人都可以建议我可以上传任何图片的任何网站（我正在为我的问题创建一个小提琴，但因为我需要它来引用一些图片而感到震惊）
@Jay 您可以使用 lorempixel.com 为您的代码使用虚拟图像；）

【解决方案1】：

我认为你可以用这个技巧来实现这一点：你永远不会看到背景，因为它没有空间可以显示...解决方案自然通过在<tr> 中设置填充以使该填充显示背景图片。但是，<tr> 只有在将display 设置为display:block; 时才会获得填充。

我终于用这个代码了：

.logo {
   background:url(whatever.jpg) no-repeat -12px top;
   display:block;
   padding-left:12px;
}

希望这会有所帮助！

【讨论】：