Html CSS：在执行Ctrl和Ctrl操作时固定背景大小-
我正在建立一个网页，我有一个横跨整个屏幕的背景图像。当按下ctrl和-（或ctrl和向下滚动）时，图像会缩小，因此图像会变小（我相信每个人都知道它的作用） 我的问题是，是否有一个css属性允许我保持图像缩放（即大小永远不会改变，并且它仍然覆盖整个网页），而不考虑窗口的放大和缩小 我在谷歌上搜索了我的答案，查看了w3school等等，但一切似乎都链接到了实际的网页上下滚动，并使图像保持静态，这不是我想要的 这是我的网页通常的样子： 当我缩小时： 我希望背景继续覆盖整个页面，我不关心导航栏/页脚大小的减小 这个网站展示了我想要实现的目标（试着缩小） 非常感谢您的帮助/指向某些资源的提示 HTML:Html CSS：在执行Ctrl和Ctrl操作时固定背景大小-,html,css,web,Html,Css,Web,我正在建立一个网页，我有一个横跨整个屏幕的背景图像。当按下ctrl和-（或ctrl和向下滚动）时，图像会缩小，因此图像会变小（我相信每个人都知道它的作用） 我的问题是，是否有一个css属性允许我保持图像缩放（即大小永远不会改变，并且它仍然覆盖整个网页），而不考虑窗口的放大和缩小 我在谷歌上搜索了我的答案，查看了w3school等等，但一切似乎都链接到了实际的网页上下滚动，并使图像保持静态，这不是我想要的 这是我的网页通常的样子： 当我缩小时： 我希望背景继续覆盖整个页面，我不关心导航栏/页脚大小
答案就在你链接的页面上：
背景尺寸：封面
关于如何在此处应用它的工作示例：
正文{
背景：url（background.jpg）中心无重复固定；
背景尺寸：封面；/*强制背景覆盖整个屏幕*/
背景色：#111；
颜色：#FFF；
}
我试过了，但似乎不起作用；为了方便起见，我将在稍后发布我的代码。使用和img元素可能不是您所需要的。在这种情况下，将background:url（..）
应用到.tint
元素或另一个合适的容器（如页眉）以及背景大小：cover，可以获得更好的结果（即：在img元素上使用任何background-*属性都可能不起作用）。问题是我不希望图像一直被修复。我计划在图像下方添加更多内容，这样当用户滚动时，图像就会消失。你的技术允许我这么做吗？如果需要，我需要在HTML中更改哪些部分？我想是的！这是否接近你想要达到的结果？我在标题下添加了更多内容，当用户向下滚动时，更多内容很好地进入屏幕。如果你需要的话，我们可以进一步调整。啊，你需要完全移除背景，因为你现在只通过css控制背景。这能解决问题吗？：）我看到了你的更新代码。视口单位对于高度肯定会更好。我把90vh相当于屏幕的90%仅用于演示。您可以将高度设置为100vh
为100%。更多信息请点击此处：
<head>
<meta http-equiv="refresh" content="4">
<link href="main1.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
</head>
<header>
<nav>
<ul>
<li class="active"><a href="index.html"><strong>Home</strong></a></li>
<li><a href="about.html"><strong>About Me</strong></a></li>
<li><a href="portfolio.html"><strong>Portfolio</strong></a></li>
<li><a href="contact.html"><strong>Contact</strong></a></li>
<li><a href="links.html"><strong>Links</strong></a></li>
</ul>
</nav>
</header>
<body>
</body>
<footer>
<div class="col">
Copyright © 2016<br>
<span style="font-size:0.6em;">HTML5 | CSS3 | JavaScript</span></span></div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/linkedin.png" alt="My LinkedIn" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/gmail.png" alt="Email Me" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/bitbucket.png" alt="My BitBucket" height="41" width="50" border="0">
</a>
</div>
</footer>
body {
margin: 0;
}
header {
background: url(images/bg-image.jpg) center no-repeat fixed;
width: 100%;
height: 100%; /* viewport units are good for sizing big containers */
background-color: red;
background-size: cover;
}
.tint img {
opacity: 0.8;
background-size: cover;
}
nav {
position: fixed;
top: 0;
left: 0;
right:0;
background: rgba(139,23,28, 0.5);
padding-top: 5px;
padding-bottom: 5px;
}
nav h1 {
display: inline;
font-family: lobster;
color: #fff;
padding-left: 30px;
padding-right: 60px;
}
nav ul {
display: inline;
text-align : right;
}
nav ul li {
font-family: arial;
display: inline-block;
list-style-type: none;
padding: 5px 20px;
text-align: center;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
letter-spacing: 0px;
margin: 0;
font-size: 15px;
text-align: center;
}
footer {
background: #8B171C;
color: white;
width: 100%;
display: inline-block;
}
#copyright {
text-align: left;
padding-right: 150px;
display: inline;
}
.sociallink {
height: 30px;
width: 30px;
}
.col {
float: left;
margin: 1%;
}