html - 使用菜单作为 bg 图像创建午餐菜单 HTML？

Question

我正在尝试制作一个类似于餐厅菜单的网站，我们的厨师每周都会在我的工厂更新菜单。基本上我有一个我想使用的图像，我希望文本写在图像之上。

我已经尝试了几个 CSS 代码，但我无法让任何东西像我想要的那样与图像居中。任何帮助，将不胜感激。我希望图像比这大一点 - 可能是 800x600(这样文本也很好，也很大)

Answer 1

我会这样做，干净简单的方法:

.menu {
  background: url(http://i.stack.imgur.com/1H3g5.jpg);
  width: 770px;
  height: 562px;
  padding: 25px 430px 25px 35px;
  box-sizing: border-box;
  margin: 0 auto;
}

.menu h2 {
  font-size: 18px;
}

<div class="menu">
  <h2>Menu position 1</h2>
  <p>menu 1.1</p>
  <p>menu 1.2</p>
  <p>menu 1.3</p>
  <h2>Menu position 2</h2>
  <p>menu 2.1</p>
  <p>menu 2.2</p>
  <p>menu 2.3</p>
</div>

div 必须与图像大小相同，填充基本上定义了不应看到文本的区域，因此 430px 将文本右侧的区域设置为不应流入的区域。

对于响应式布局，您可以定义使用较小图像的媒体查询，并相应地设置宽度、高度和填充设置。不幸的是，我没有轻松阅读媒体查询，但您可以使用它作为开始:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries