使响应式全屏背景图像具有固定按钮

Question

首先，我想要一个响应式全屏背景图像。 我知道网络上有很多教程，但就我而言，在图像的特殊区域有一个固定按钮，可点击，点击它，用户必须转到下一页！这个页面确实是我网站的初始页面。 我之前的解决方案是使用 jQuery 计算屏幕大小并根据背景图像的大小变化：

    var width = $(window).width();
    var height = $(window).height();
    //....

有没有 html css 解决方案？ 谢谢。

Answer 1

background-size：cover 自动调整图片大小以适应屏幕和绝对位置，left 和 top 以百分比为单位将按钮粘贴在相对于图片的同一位置。在全屏模式下查看以下示例并尝试调整浏览器窗口的大小：

body{
  background-image: url('http://tinytour.org/wp-content/uploads/2015/02/beautiful-paris-wallpaper-for-home.jpg');
  background-size: cover;
}
input[type='button']{
  position: absolute;
  top: 10%;
  left: 73%;
}

<input type='button' value='press me!' />