Question

我正在尝试为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>

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

Answer 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>

希望这有帮助！：）

动态全屏图像启动页面

1 个答案: