Question

我需要为一个项目建立一个网站。如何将移动的gif作为全屏背景？ Here是我迄今为止所做的（例子）

HTML

<head>
    <title>OFFICIAL SQUIDDINC</title>
    <div class="gif-container"></div>
<head>
<html>

CSS

html, body {
    height: 100%;
    margin: 0;
}

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

Answer 1

在这个片段中有一些不妥之处。

对于HTML;

您错过了开始<html>标记。虽然这可能只是一个糟糕的复制粘贴问题。

此<title>是唯一属于<head>标记内的内容。

html的其余部分应封装在<body>标记内。

<html>  

  <head>
    <title>OFFICIAL SQUIDDINC</title>
  <head>

  <body>
    <div class="gif-container"></div>
  </body>

</html>

对于CSS;

您不需要为html, body设置高度，但是您需要为gif容器设置它。我已经继续使用单位vh and vw。这些平均视口高度和视口宽度分别为。通过为每个指定100，这将完全等于浏览器视口（屏幕）的高度和宽度。

html, body {
  margin: 0;
  padding: 0;
}

.gif-container {
  background: url("image.gif") no-repeat 0 0;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

样本;

http://codepen.io/anon/pen/Byevzv

项目的HTML编码

1 个答案: