html - 带按钮的全屏背景

Question

我正在尝试创建一个像这样的图像（页面中心）的全屏 html 模板：

在指向人和其他点时，我想创建一个可点击按钮，但由于图像全屏和固定位置，另一个屏幕尺寸的按钮获得其他位置。

我的全屏图像代码：

html, body ,form
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height:100%
}
.fullscreen
{
  z-index: -999;
  height: 100%;
  position: fixed; 
  width:auto;
  padding: 0;
  margin: 0;
}

  <img src="source/fullscreen.jpg" class="fullscreen" /> 

如何仅使用 css 解决所有屏幕尺寸的问题？和中心全屏图像？

Answer 1

您可以设置所有这些按钮相对于它们各自位置的“边距”属性 - CSS。

Answer 2

您在水平和垂直方向居中图像的问题在 CSS-Tricks 中有详细记录：

http://css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal-an-image/

示例之一（接近您想要的，并且没有在尝试使用该方法时必须知道图像尺寸的缺点）：

html { 
   width:100%; 
   height:100%; 
   background:url(http://i.stack.imgur.com/5qSmX.jpg) center center no-repeat;
}

实际效果如下：

http://jsfiddle.net/ukVNS/

请参阅其他方法引用的链接。