我对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>
您应该设置一个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>