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

时间：2016-03-14 19:14:39

标签： html css

我试图创建一个类似餐厅菜单的网站，我们的厨师每周都会在我们的工厂更新。基本上我有一个我想要使用的图像，我希望文本写在图像的顶部。

我已经尝试了几个CSS代码，我无法通过我想要的图像获得任何内容。任何帮助，将不胜感激。我希望图像比这个大一点 - 可能是800x600（这样文本很好也很大）

enter image description here

1 个答案:

答案 0 :(得分：4)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

相关问题
最新问题