html网页制作 基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
warning:
这篇文章距离上次修改已过188天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家乡风景</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('hometown-background.jpg') no-repeat center center fixed;
background-size: cover;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
z-index: 10;
}
</style>
</head>
<body>
<div class="background">
<div class="content">
<h1>欢迎回家</h1>
<p>这里是您的家乡，一个充满生机和活力的地方。</p>
</div>
</div>
</body>
</html>这个简单的HTML页面展示了如何使用CSS为一个全屏背景图片创建一个简单的家乡风景网页，同时在背景图上覆加文字内容。通过CSS的background-size: cover;属性确保背景图片覆盖整个页面，并保持其宽高比。文字内容通过绝对定位放置在背景图的中央。
评论已关闭