我不明白为什么 100% 宽度不适用于背景图片答案

【问题标题】：I can't figure out why 100% width doesn't work with a background image我不明白为什么 100% 宽度不适用于背景图片
【发布时间】：2017-08-11 06:17:23
【问题描述】：

我正在尝试创建一个网页。我有一点困难让我的背景图片显示出来。我已经启动并运行了它，但我决定给它一个响应式设计，但我想不通。这是我的图像代码：

<style>
    body .title_img {
        background-image: url("SplashScreen.jpg");
        height: auto;
         width: 100%;
        background-position: center;
        z-index: -1;
    }
</style>

<div class="title_img">
    <!-- Background Splash Screen -->
</div>

如果我给高度/宽度一个确定的大小（像素），它就会显示出来。我不明白为什么 100% 宽度和自动高度不会给我一个 100% 身体大小的图片（我认为我已经确定它是 html 文档的 100%）和一个高度自动与宽度成比例。有人可以解释我做错了什么吗？

编辑 - 添加了 HTML 代码。

【问题讨论】：

你能把html代码也显示一下吗？
对不起，我对这个网站非常陌生，并且使用 HTML 和 CSS 编码。
基本上为什么它不起作用：div的高度为0，因为div不包含任何东西，它只有一个背景图片，但背景图片的大小没有定义div的高度
如果你想让你的代码工作，你可以添加“位置：固定；左：0；右：0；上：0；下：0”到css，但我认为它有办法对此有更好的解决方案，这就是您可以采用这种方式的方式

标签： html css

【解决方案1】：

整页背景图片

我认为您要创建的是您网站的整页背景图片。根据阅读您提供的代码，我相信您需要执行以下操作：

用图片填充整个页面，没有空白
根据需要缩放图像
保留图像比例（纵横比）
图片居中页面
不会导致滚动条
尽可能跨浏览器兼容
是不是像 Flash 这样花哨的恶作剧

如果这是您要创建的内容，那么我发现了几行代码可以提供帮助。这是一个示例，说明如何使用 css 对图像执行此操作：

CSS 文件（这就是魔法发生的地方）：

html { 
  background: url("SplashScreen.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

只需确保您的html 文件设置正确以使用css 文件，它应该会创建一个很酷的背景图像，您可以将其用于您的网站。

您可以阅读此here 的更多内容，并了解更多关于它的工作原理。

【讨论】：

这正是我想要的。我什至没有想过使用整个 html（它的词是什么，元素？）作为背景。谢谢您，先生，我一定会阅读您的链接。
使用元素而不是元素的原因是因为我们喜欢称之为“CSS 盒子模型”，我相信这给你带来了麻烦。在做这样的项目时，并不是强制你只使用 css，但是从代码中可以看出，它使用起来要简单得多。我敢肯定你以前可能听说过盒子模型，但如果没有，这里有一个链接可以帮助你入门：w3schools.com/css/css_boxmodel.asp。盒子模型之前的课程是高度/宽度，我也会看看。

【解决方案2】：

尝试在您的 css 中设置 body 和 html 中的 height: 100%：

html, body {
    height: 100%;
}

然后将background-size: cover 放入body .title_img：

body .title_img {
    background-image: url("SplashScreen.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

参见参考here。

【讨论】：

这会导致照片出现并且在调整窗口大小时可以正确缩放，但是它已经向下移动了放置在它上面的
。图像是否可以在固定位置和中心同时调整到窗口大小？

【解决方案3】：

使用

background-size: cover

或

background-size:100% 100%.

与

background-repeat: no-repeat

这会将其设置为其容器的 100%。

【讨论】：