动态全屏图像启动页面

【问题标题】：Dynamic Fullscreen image splash page动态全屏图像启动页面
【发布时间】：2017-03-20 03:18:42
【问题描述】：

我正在尝试在 bigcartel 上为我的网站构建一个简单的登录页面。我正在尝试获取它，以便全屏图像占据整个页面并在点击后指向产品页面经过大量研究，这就是我想出的

<head>
<a href="/products">
<img title="click to enter" src="http://i.imgur.com/QC0IqJ9.gif"
style="width: 100%"; style="height: 100vh">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 <
body {
background: src="http://i.imgur.com/QC0IqJ9.gif" ;
background-size: 100% 100%;
}
-->
<a {
 position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}>
</style>
   </a>
  {{ head_content }}
</head>

我的问题是我无法根据浏览器分辨率拉伸和调整图像

【问题讨论】：

标签： html image image-size splash-screen scrapy-splash

【解决方案1】：

<style> 中有一些非常奇怪的标签，但我假设它们是 Scrapy-Splash 的一部分。问题出在您的background: src="http://i.imgur.com/QC0IqJ9.gif"; 行上。您正在设置 CSS，所以您不设置 src，而是设置 url()：

body {
  background: url("http://i.imgur.com/QC0IqJ9.gif");
  background-size: 100% 100%;
}

<body>
</body>

希望这会有所帮助！ :)

【讨论】：