我正在制作“视差”效果,但不起作用

问题描述 投票:0回答:1

我对HTMLCSS有点陌生,正在建立一个网站,但是我似乎无法在我的图像上创建视差效果... 该图像没有显示。 您能看到我的(简化的)代码怎么了吗?

.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>
html css image parallax
1个回答
0
投票

您应该设置一个min-height。我在此处设置了500像素,但可以更改。

.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>
© www.soinside.com 2019 - 2024. All rights reserved.