带按钮的全屏背景

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-很好地记录了你的图像水平和垂直居中的问题：

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

其中一个例子(它接近于你想要的，并且没有在尝试使用该方法时必须知道图像尺寸的缺点)：

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

它看起来像这样：

http://jsfiddle.net/ukVNS/

有关其他方法，请参考引用的链接。