Question

我正在尝试创建一个网页。我有点困难让我的背景图片出现。我把它运行起来，但我决定要给它一个响应式设计，我无法弄明白。这是我的图像代码：

<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％的身体大小的图片（我认为我已经确定它是100％的HTML文档）和一个高度，自动与宽度成比例。有人可以解释我做错了吗？

编辑 - 添加了HTML代码。

Answer 1

尝试在{c}中的height: 100%和body设置html：

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。

Answer 2

使用

background-size: cover

或

background-size:100% 100%.

带

background-repeat: no-repeat

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

Answer 3

整页背景图片

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

用图片填充整个页面，没有空白区域
根据需要缩放图片
保留图像比例（宽高比）
图片位于页面
不会导致滚动条
尽可能跨浏览器兼容
不是像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中详细了解并详细了解这项工作的原因。

我无法弄清楚为什么100％宽度不适用于背景图像

3 个答案: