如何使背景标题图像扩展到浏览器的全宽答案

【问题标题】：How to make a background header image extend to full width of browser如何使背景标题图像扩展到浏览器的全宽
【发布时间】：2016-09-09 07:43:16
【问题描述】：

仍在学习 CSS 的工作原理。目前，我正在尝试使背景图像覆盖整个标题，而顶部/右侧/左侧没有任何间隙。

我尝试了其他几个选项，但似乎无法移动此图像。

（即添加 html，但我想将其与该文件分开。我也有尝试制作边距 0)

<!--EXAMPLE1-->
.splash_img {
background-repeat:no-repeat;
background-position: center top;
display:block;
margin:0px auto; 
}

<!--EXAMPLE2-->
.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px; 
}

它继续停留在浏览器的右上角。目前这就是我所拥有的。

<head> 
    <div class="splash_img">
        <img src="Images/bakemock.jpg" alt="bake"/>
    </div>
</head>

.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px;
}

【问题讨论】：

你的意思是有
而不是吗？
我的意思是这只是一个图像 - 不会有任何
等。标题
标签应该只包含关于页面的元数据，内容元素应该在中。之外的元素不会被渲染

标签： html css image header width

【解决方案1】：

这些行：

<head> 
   <div class="splash_img">
     <img src="Images/bakemock.jpg" alt="bake"/>
   </div>
</head>

无法工作。

您不能将<div> <img> 等html 元素以及许多其他元素放在<head> 标记中。您的构建器标签应仅位于 <body> 内。而且<body>里面不能有<head>标签。

两种可能

如果此部分位于 <body> 内，并且没有引用 <head> 上方的 <body> 则将其更改为 <header> 或类似的东西
如果此部分位于 <body> 上方，请删除其中的 html 元素并在您的 <body> 部分中放置 <header> 标记

一个有效的 HTML 应该是这样的：

<!DOCTYPE html>
<html>
<head>
   <title>Some title</title>
   <!-- meta tags, js scripts, css styles etc -->
</head>
<body>
   <!-- div tags, spans, imgs, etc are ok -->
   <!-- but you cannot put a <head></head> tag here -->
</body>
</html>

还有一个重要提示

您不能放置background-image: 并指定超过背景图像src itselt。如果您想指定的不仅仅是来源，请改用background:

background: url("/Images/bakemock.jpg") no-repeat center;

最后一件事当然是浏览器为您应该覆盖的<html> 和<body> 标签提供的默认填充/边距：

html, body {
   padding:0px;
   margin:0px;
}

总结

此代码将为您工作

<!DOCTYPE html>
<html>
<head>
    <title>Some title</title>
    <style>
        header {
            background: url("/Images/bakemock.jpg") no-repeat center;
            background-size: 100% 100%;
            height: 630px;
        }
        html, body {
            padding:0px;
            margin:0px;
        }
    </style>
    <!-- meta tags, js scripts, css styles etc -->

</head>
<body>
    <!-- div tags, spans, imgs, etc are ok -->
    <!-- but cannot put a <head></head> tag here -->
    <header>
    </header>
</body>
</html>

你也可以在这里看到：

JSFiddle

希望对您有所帮助。如果您有任何问题，请告诉我。

【讨论】：

此方法无效。图像仍然停留在右上角。感谢您让我知道那些不应该存在、不知道的标签。
@Jen 你是绝对正确的。这是一件奇怪的事情，因为我真的相信我编辑了我的信息，显然没有。无论如何，我现在再次对其进行了编辑并添加了更多内容。如果您愿意，现在可以再次查看。希望它有所帮助:)
好吧，我复制了您在上面的内容，但仍然无法正常工作。但我确实对其进行了调整。我看到你有引用 header/html/body 的样式标签。然后注意到
标记中没有。所以我添加了它。图像确实发生了变化，但我留下的图像是重复的。
@Jen JSFiddle 对你有用吗？也许我不明白你想要达到什么目的
@Jen 正如我从你的问题中了解到的那样，你想要一个带有背景的标题，它延伸到整个页面的宽度。要实现这一点，您不应将<img> 元素放在<header> 内。您只需使用background-image 设置标题样式。如果这是您想要的，请查看我在答案中输入的 JSFiddle，看看是否可以。如果没问题，那么我发布的代码也应该可以工作。如果它不起作用，您可能需要将背景 url 路径更改为图像库。您可以通过放置小提琴中的背景 url 路径来测试它。希望它有所帮助:)

【解决方案2】：

你可以这样做：

HTML：

<div class="splash_img">
    <img src="Images/bakemock.jpg" alt="bake"/>
</div>

CSS：

.splash_img {
  background: url(Images/bakemock.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

【解决方案3】：

或者您可以使用background 属性

<style>
/* basic reset */
* {margin: 0;padding: 0;}

.header {
    background: url('Images/bakemock.jpg') no-repeat; /* you may also change the URL */
    background-size: 100% 100%;
    width: 100%;
    display: inline-block;
    height: 200px; /* you may also change this */
}
</style>

<header class="header"></header>

绝对没有空格和间隙

【讨论】：

等。标题

两种可能

还有一个重要提示

总结