Question

编写网站背景代码。目标是1）第一图像的浏览器窗口的100％高度2）图像保持在窗口中心并且侧面被切断3）在主页上还有两个额外的图像需要具有相同的效果。尝试和编写不同的代码块，而不是任何地方。我可以得到一个刚刚打破另一个的部分。感谢任何assistnaceCurrent代码块如下：

<html>

<head>
    <meta charset="UTF-8">

    <title>Background Image</title>

    <style>

        * { margin: 0; padding: 0; }

        .background { 
            background: no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

    </style>

</head>

<body>
    <div class="background">
        <img src="images/bg.png">
    </div>
    <div class="background bg2">
        <img src="images/bg2.png">
    </div>
</body>

</html>

Answer 1

不确定我是否完全理解您的问题是什么，但是您的图片需要获得窗口的高度

.background {
     background-image: url(images/bg.png);
     height: 100vh;
}

这样，背景图像将始终使用视口的整个高度。不确定问题的其余部分！

Answer 2

如果我理解您要做的事情，那么您的代码中有一些内容是错误的。首先，我将解释一些事情然后我会提供我想出的代码，当我测试它时。这就是......

首先，在你的style元素中，你有“.background：”，你不需要你编写的任何代码。提到webkit，moz等的东西实际上是针对可能存在跨浏览器兼容性问题的东西。背景大小不是你不必担心的事情之一。我在“背景”课程中唯一要考虑的是宽度和高度为100％。

第二，谈到宽度和高度，我会包括“html”和“body”元素，并给它们宽度和高度均为100％。

第三，你试图在你的html中列出你的图像，但是你正在尝试设置它们，好像你有你的css产生它们一样。请注意我的html如何将“背景”div留空，然后在css中包含照片的网址。

简而言之，我相信您可能会对使用何种方法以及何时/何地感到困惑，因为您实际上将不同的方法融合在一起。也就是说，这是我写的代码......

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Background Image</title>
    <style>

        * { margin: 0; padding: 0; }

        html, body {
            width: 100%;
            height: 100%;
        }

        .background { 
            width: 100%;
            height: 100%;
        }

        #bg1 {
            background: url(images/bg.png) no-repeat center;
            background-size: cover;
        }

        #bg2 {
            background: url(images/bg2.pngg) no-repeat center;
            background-size: cover;
        }

    </style> 
</head>

<body>
    <div class="background" id="bg1">
    </div>
    <div class="background" id="bg2">
    </div> 
</body>

</html>

这是一个可能对您有帮助的链接。他们有很棒的指导，练习和教程：w3schools.com

希望所有这些都有助于扎克！：）

背景图像定位，全宽，浏览器高度100％，多个部分，填充问题

2 个答案: