CSS：执行Ctrl和时的FIxing背景大小 -

Question

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

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

我用Google搜索了我的答案，检查了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%;
}

Answer 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元素作为背景，因为它们不是很方便。 请参阅何时使用IMG与CSS背景图像？ 了解更多信息。

CSS：执行Ctrl和时的FIxing背景大小 -

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-12 04:27:35

CSS：执行Ctrl和时的FIxing背景大小 -

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-12 04:27:35

解决方案1
1 已采纳 2016-03-12 04:27:35