CSS：在执行 Ctrl 和 - 时修复背景大小答案

【问题标题】：CSS: FIxing background size when doing Ctrl and -CSS：在执行 Ctrl 和 - 时修复背景大小
【发布时间】：2016-03-12 13:42:45
【问题描述】：

我正在构建一个网页，我有一个横跨整个屏幕的背景图片。当按下 ctrl 和 - （或 ctrl 并向下滚动）时，这会缩小图像，使其变得更小（我相信每个人都知道它的作用）。

我的问题是，是否有一个 css 属性可以让我保持图像缩放（即大小永远不会改变，它仍然跨越整个网页）而不管窗口是否放大？

我已经用谷歌搜索了我的答案，检查了 w3school 等，但所有内容似乎都与实际物理上上下滚动网页有关，并使图像保持静止，这不是我想要的。

这是我的网页正常的样子：https://gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538

当我缩小时：https://gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4

我希望背景继续跨越整个页面，我不关心导航栏/页脚大小的减小。

http://www.dragonstoneproductions.com/这个网站展示了我想要实现的目标（尝试缩小）。

非常感谢任何帮助/指向某些资源的指针

HTML：

<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 &copy; 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>

CSS：

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%;
}

【问题讨论】：

使用和 img 元素可能不是您所需要的。在这种情况下，将background: url(....) 应用于.tint 元素或另一个合适的容器（如标题）以及background-size: cover;（即：在img 元素上使用任何background-* 属性可能不起作用）会得到更好的结果.
问题是我不想一直修复图像。我计划在图像下方添加更多内容，以便用户滚动时，图像消失。你的技术允许我这样做吗？如果需要，我需要在 HTML 中更改哪些部分？
我想是的！这是否接近您想要完成的结果？ codepen.io/wilman/pen/vGKqjm 我在标题下方添加了更多内容，当用户向下滚动时，更多内容会很好地进入屏幕。如果您需要，我们可以进一步调整。
啊，您需要完全删除因为您现在仅通过 css 控制背景。这能解决问题吗？ :)
我看到了你更新的代码。视口单位肯定会更好地适应高度。我把 90vh 相当于屏幕的 90% 仅用于演示。您可以将高度设置为100vh 100%。更多信息：css-tricks.com/viewport-sized-typography

标签： html css web

【解决方案1】：

答案在您链接的页面中：background-size: cover;。

关于如何在此处应用它的工作示例：http://codepen.io/wilman/pen/vGKqjm

body {
  background: url(background.jpg) center no-repeat fixed;
  background-size: cover; /* forces bg to span the entire screen */
  background-color: #111;
  color: #FFF;
}

同时尽量避免使用 html img 元素作为背景，因为它们不太方便。请参阅When to use IMG vs. CSS background-image? 了解更多信息。

【讨论】：

我已经尝试过了，但它似乎不起作用；为方便起见，我稍后会发布我的代码。