时间戳

首页 > 解决方案 > 我正在制作“视差”效果，但它不起作用

html - 我正在制作“视差”效果，但它不起作用

问题描述

我有点新，HTML并且CSS正在建立一个网站，但我似乎无法在我的图像上创建视差效果......图像只是没有显示。你能看出我的（简化的）代码有什么问题吗？

.parallax {
  background-image: url("images/start-background.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="parallax"></div>
  <h1 class="title-home">This is my title</h1>
  <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2>
  <div class="parallax"></div>
</body>

</html>

标签： htmlcssimageparallax

解决方案

你应该设置一个min-height.I made 500px here 但你可以更改。 

.parallax {
  /* The image used */
  background-image: url("https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg");
  min-height: 500px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="parallax"></div>
  <h1 class="title-home">This is my title</h1>
  <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2>
  <div class="parallax"></div>
</body>

</html>

推荐阅读