Question

如果问题很简单，我很抱歉，但我几乎没有从前端开发开始，可能会错过一些关键字来掌握现有问题。

我有一个带标题和三个按钮的简单html文件，CSS只有一张图片。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/style.css" rel="stylesheet" media="all"> 
</head>
<body>

<div id="banner">

<h1> A random title </h1>

<div id="navi" class="navi">
        <a class="navi-button" href="#Home">Rules</a> &nbsp;
        <a class="navi-button" href="quizz1.html">Quizz</a> &nbsp;
        <a class="navi-button" href="#Contact"> Contact</a> &nbsp;
</div>

</div>

</body>
</html>

CSS

html {
    background: url(../pics/somePicture.jpg) no-repeat center center fixed;
    background-size: cover;
}

问题：

当我调整大小，最小化，最大化我的浏览器窗口时，标题和三个按钮都贴在我的左边框上，图像也会调整大小...而我希望按钮保持在左侧，就像我的浏览器窗口一样全屏显示。我想要全屏设置图像，当我调整大小时，只有浏览器窗口界定的图像部分应该出现。

例如，在this上通过调整窗口大小，按钮位于底部，背景图像不适合调整大小。

如果需要，我愿意接受jQuery解决方案。

非常感谢你的帮助，

Answer 1

如果您不希望图像适应调整大小，则css应该只是：

background-image: url("../pics/somePicture.jpg");

图像将按原样显示，永远不会适应窗口大小。

关于链接，＃Rohit Kumar给出的答案是你想要的，在这里测试：jsfiddle.net/qp4xfvjj ，但可能会添加：

<body style="overflow: hidden">

Answer 2

如果你不打算在下一行打破<a>那么你应该使用 - white-space: nowrap;。如果你想在窗口宽度小于1厘米时隐藏<a>，那么你应该像这样使用@media查询 -

@media all and (max-width: 100px) { /* you have to enter width in px */
    a {
        display: none;
    }
}

查看此fiddle

要使background-image在所有分辨率下完全显示（不进行任何裁剪），您应该使用 - background-size: contain代替background-size: cover

在坚持全屏的背景的图象 - 黏附在左边的按钮

2 个答案: