全屏幕背景与按钮

Question

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

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

我的全屏图片代码：

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

您可以根据各自的位置设置所有这些按钮的“margin”属性 - CSS。

Answer 2

CSS-Tricks详细记录了水平和垂直图像居中的问题：

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/

查阅其他方法引用的链接。

Answer 3

试试这个：

* {
margin: 0;
}
body {
background: url(img);
height: 100%;
width: 100%;
background-size: 100%;

}

不要使用这样的脚本：

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

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

当你想设置背景......