如何使背景 header 图像扩展到浏览器的整个宽度

Question

仍在学习 CSS 的工作原理。目前，我正在尝试让背景图像覆盖整个 header，并且 top/right/left 两侧没有任何间隙。

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

（即添加 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;
}

Answer 1

这些行：

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

无法工作。

您不能将 html 元素（例如 <div> <img> 和许多其他元素放在 <head> 标签内。您的构建器标签应仅位于 <body> 内。 <body> 里面不能有 <head> 标签。

两种可能

如果此部分在 <body> 内且未引用 <body> 上方的 <head>，则将其更改为 <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 本身。如果你想指定的不仅仅是源，请使用 background: 而不是

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

最后一件事当然是浏览器为 <html> 和 <body> 标签提供的默认值 paddings/margins，您应该覆盖它们：

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

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

Answer 2

或者您可以使用 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>

绝对没有空格和间隙

Answer 3

你可以这样做：

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;
}

如何使背景 header 图像扩展到浏览器的整个宽度

How to make a background header image extend to full width of browser

html

css

image

header

width

两种可能

同样重要的注意事项

总结