通过 table 个单元格显示背景图像？

Question

我想在页面底部的浮动栏上设置背景图片：https://hartbodenreiniger.info/。

但遗憾的是背景图像被每个 table 单元格剪切了..

我已经尝试了两件事：

1.Convert table 到 divs 并设置背景图片。这是有效的，但我无法在浮动栏的中间和中心显示按钮。这需要将 table 转换为 divs:

jQuery('#wpfront-notification-bar > table').replaceWith( jQuery('#wpfront-notification-bar > table').html()
   .replace(/<tbody/gi, "<div id='table'")
   .replace(/<tr/gi, "<div")
   .replace(/<\/tr>/gi, "</div>")
   .replace(/<td/gi, "<span")
   .replace(/<\/td>/gi, "</span>")
   .replace(/<\/tbody/gi, "<\/div")
);

如何让按钮居中？

或者我的第二个解决方案是创建一个叠加层 div 并将此 div 设置为带有背景图像的 display:absolute;。但同样的问题。我如何将按钮居中，并且还有覆盖包装在文本上方的问题..

我认为方法 1 是更好的方法，但我如何才能将其居中？您有任何想法或任何其他解决方案吗？

亲切的问候

Answer 1

您可以使用 line-height 属性。尝试下面的代码并查看差异

.container{
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

.the-button{
  height: 100%;
  line-height: 100px;
}

button{
  height: 30px;
}

<div class="container">
  <div class="the-button">
    <button>Hello</button>
  </div>
</div>
<div class="container">
  <div style="height:100%;">
    <button>Hi</button>
  </div>
</div>

通过 table 个单元格显示背景图像？

Display an background image trough table cells?

html

javascript

css

jquery

center