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

Question

I'm in the process of building a webpage, and I have a background image that spans the entire screen. 我正在建立一个网页，我有一个跨越整个屏幕的背景图像。 When pressing ctrl and - (or ctrl and scrolling down), this scales down the image so it becomes smaller (I'm sure everyone's aware of what it does). 当按下ctrl和 - （或按住ctrl并向下滚动）时，这会缩小图像，使其变小（我确信每个人都知道它的作用）。

My question is, is there a css property that allows me to keep the image scaled (ie the size never changes, and it still spans the whole webpage) regardless of zooming in and out of the window? 我的问题是，是否有一个css属性允许我保持图像缩放（即大小永远不会改变，它仍然跨越整个网页），无论放大和缩小窗口？

I've googled for my answer, checked w3school, etc, but everything seems to be linking to actually physically scrolling up and down the webpage and leaving the image static, which is not what I want. 我用Google搜索了我的答案，检查了w3school等，但是所有内容似乎都链接到实际上在网页上滚动并保持图像静态，这不是我想要的。

This is what my webpage looks like normally: https://gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538 这就是我的网页正常情况： https ： //gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538

and when I zoom out: https://gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4 当我缩小时： https ： //gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4

I'd like the background to continue spanning the entire page, I don't care about the navigation bar/footer size decreasing. 我希望后台继续跨越整个页面，我不关心导航栏/页脚大小的减少。

http://www.dragonstoneproductions.com/ This website demonstrates what I'm trying to achieve (try zooming out). http://www.dragonstoneproductions.com/这个网站演示了我想要实现的目标（尝试缩小）。

Any help/pointers to some resources is much appreciated 任何有关某些资源的帮助/指针都非常感谢

HTML: 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: 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

The answer is in the page you linked: background-size: cover; 答案在您链接的页面中： background-size: cover; . 。

Working Example on how to apply it here: http://codepen.io/wilman/pen/vGKqjm 关于如何在此处应用它的工作示例： 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; }

Also try to avoid using html img elements for backgrounds as they are not very convenient for that purpose. 还要尽量避免使用html img元素作为背景，因为它们不是很方便。 See When to use IMG vs. CSS background-image? 请参阅何时使用IMG与CSS背景图像？ for more info. 了解更多信息。

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