Question

设置目标网页

我已经创建了一个图像，我将其设置为背景图像。不幸的是，我似乎无法弄清楚如何让它成为全屏和可滚动 - 所以你可以向上/向下滚动来查看完整的图像 - 但没有任何空格或任何东西。

    <!DOCTYPE html>
<html>

    <title>On The Ropes Boxing! Coming Soon!</title>

  <body>
<style>
html { 
    height: 100%;
    margin:0px;
    background: url(comingsoon.jpg) no-repeat top center;
    background-size: cover;
    background-attachment: scroll;
}
body {
    min-height: 100%;
    margin:0px;
}
#appcontainer {
    position: relative
    background-color: rgba(255, 255, 255, 0.7);
    width:560px; height:2220px;
    left:20px; top:20px;
}
    <img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
  </body>
</html>

这就是我到目前为止所拥有的。我是HTML和CSS的新手，所以我基本上只是在学习工作并经历反复试验。我完全希望被告知我这样做完全是错误的。任何建议都表示赞赏 - 请注意，我可能需要被告知好像我是个白痴：）

非常感谢。

Answer 1

将代码中的img标记替换为：
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
并将其移出style代码。

Answer 2

在我得到答案之前，请允许我先修正你的代码。

网页的基本格式为：

<!doctype HTML>
<html>
    <head>
        //Titles, scripts, styles, etc.
    </head>
    <body>
        //Everything else, can also hold scripts and styles.
    </body>
</html>

您的代码中缺少head。

其次，请勿将html标记放在style标记内（指代您的img）。

关于你的问题，

<!DOCTYPE html>
<html>
    <head>
        <title>On The Ropes Boxing! Coming Soon!</title>
        <style>
            html, body { 
                height: 100%;
                width: 100%;
                margin:0px;
                border: 0;
            }
            .splash {
                width: 100%;
                z-index: 0;
            }
            //Rest of styles
        </style>
    </head>
    <body>
        <img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
    </body>
</html>

将图像作为背景将无效，因为页面无法滚动到任何内容。将背景作为图像将允许页面滚动。

将背景图像设置为全屏，并可滚动

2 个答案: