问题描述
涵盖这方面的大多数历史线索不是我特别需要的,或者它们的屏幕截图/链接的文件不再可以通过Internet访问,从而很难遵循。
我希望我的视差图像能覆盖页面的左上角,从上到下。这是我坐着的侧面照。我认为将高度/宽度分别扩展到100%和50%应该可以解决问题,但是我不确定如何实现。到目前为止,灰色部分位于水平居中位置,我希望它位于页面的右侧部分。
我还试图将导航栏放在屏幕右侧的顶部,并且也固定在标题位置。
-
background-position: left;
并不总是将图像向左(从中心)移动。我认为这是因为我没有在百分位数中使用高度/宽度,而是在像素高度中使用了
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link href="index.html" class=active>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<Meta http-equiv="Content-Style-Type" content="text/css">
<Meta name="description" content="Learn about me,tutoring services,resume and more.">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Me | Home</title>
<!-- GOOGLE FONTS
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
-->
<Meta name="Generator" content="Cocoa HTML Writer">
<Meta name="CocoaVersion" content="1671.6">
<style>
.parallax {
/* Image to be used */
background-image: url("me_main_2.png");
min-height: 500px;
/*scrolling effect*/
background-attachment: fixed;
background-position: left;
background-repeat: no-repeat;
background-size: auto;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
*/
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:400px;background-color:lightgray;font-size:28px">
<center>
<nav>
<ul id="mainMenu">
<li><a href="about me.html">About Me</a></li>
<li><a href="Tutoring Services.html">Tutoring Services</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="photography_portfolio/photography%20portfolio.html">Photography Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li style="float:right"><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
</center>
<br><br><br>
<p><center>
This is a personal and professional website,designed solely by myself (as a personal project) with the aim of displaying my resume,contact information and other items in an accessible manner for interested parties to see.
</center></p>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* Nav Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
一如既往地感谢您抽出宝贵的时间。
解决方法
下面是您想要的,但是问题是,当屏幕缩小时,链接将换行到下一行,但是会以其他方式起作用
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 70%;
height: 100%;
}
.parallax {
z-index: 9999;
/* Image to be used */
background: url('x.png') no-repeat;
height: 100%;
width: 100%;
/*scrolling effect*/
background-attachment: fixed;
background-position: left;
background-size: auto;
}
@charset "UTF-8";
/* Nav Bar */
ul {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
*/
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link href="index.html" class=active>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="Learn about me,tutoring services,resume and more.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Me | Home</title>
<!-- GOOGLE FONTS
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
-->
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1671.6">
</head>
<body>
<div class="container">
<div class="parallax"></div>
</div>
<div style="text-align: center;height:400px;background-color:lightgray;font-size:28px">
<nav>
<ul id="mainMenu">
<li><a href="about me.html">About Me</a></li>
<li><a href="Tutoring Services.html">Tutoring Services</a></li>
<li><a href="Resume.html">Resume</a></li>
<li><a href="photography_portfolio/photography%20portfolio.html">Photography Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li style="float:right"><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
<br><br><br>
<p>
This is a personal and professional website,designed solely by myself (as a personal project) with the aim of displaying my resume,contact information and other items in an accessible manner for interested parties to see.
</p>
</div>
</body>
</html>