写一个html,背景覆盖一张图片,logo在网页上方并居中,
以下是一个简单的HTML页面示例，背景图片覆盖整个页面，并且logo位于页面上方并水平居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
#logo {
width: 200px; /* 或者你的logo图片宽度 */
height: auto; /* 保持图片的宽高比 */
margin-bottom: 20px; /* 根据需要设置logo下方的间距 */
}
</style>
</head>
<body>
<img id="logo" src="logo.png" alt="Your Logo">
</body>
</html>确保将background.jpg替换为你的背景图片路径，logo.png替换为你的logo图片路径。这段代码使用了CSS Flexbox布局来实现logo的水平居中和垂直居中。背景图片通过CSS background属性设置，并使用cover确保图片覆盖整个页面。
评论已关闭