Question

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

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

是否有html css解决方案？感谢。

Answer 1

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

1 个答案: