5

基本上我是第一次用 HTML5 构建一个响应式网站，说我遇到了很多麻烦将是一个不足的声明。无论如何，我目前遇到的一个问题是我无法弄清楚如何获得我需要的图像来显示横幅部分！

这就是我试图实现的目标：

在此处输入图像描述

但是我无法在不将其内联的情况下显示波形图像，这是我不想做的，因为它需要响应！？

到目前为止，这是我的 html 代码：

<header>
    <h1></h1><!-- Logo -->

        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">HOW IT WORKS</a></li>
                <li><a href="#">OUR CUSTOMERS</a></li>
                <li><a href="#">PRICING</a></li>
                <li><a href="#">PARTNERS</a></li>
            </ul>
        </nav>
</header><!-- End of header -->

<section class="container">
    <h2 class="hidden">Lorem Ipsum</h2>
        <div class="banner">

        </div>

</section><!-- End of slider content -->

这是CSS：

.container {
width:auto;
margin: 0 auto;
position:relative;
}

.banner {
background-image: url(../img/banner-lg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}

如果有人有任何他们认为可能会有所帮助的意见，我们将不胜感激！我真的不明白为什么背景图像一旦在css中设置就不会出现！当我有一个滑块时它工作正常，但是一旦我移除滑块并去寻找静态图像，它就不再出现>

4

3 回答 3

5

在 html 文件中使用它。

<style type="text/css">
  body{
       background:url("image.jpg");
       background-size: cover;       /* For flexibility */
       }
</style>

注意：将图像放在主文件夹而不是图像文件夹中。

于 2014-10-18T16:17:13.980 回答
0

您的横幅类似乎缺少宽度和高度，因此它可能会崩溃。您可以在浏览器的开发者控制台中进行验证吗？

于 2014-10-18T16:39:02.893 回答
0

这篇文章可能很旧，但这里是那些来这里得到答案的人的答案。

将以下行添加到.bannercss 样式的东西中

height: 100%;
width: 100%;

如果您想要自定义宽度，您可以使用百分比，但如果您想要 PX 中的特定宽度和高度，您可以执行以下操作

height: 500px;
width: 1000px;

将宽度和高度更改为所需的宽度和高度。

于 2017-10-01T22:53:37.827 回答