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

Jen*_*Jen 3 html css image header width

仍在学习 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; 
} 
Run Code Online (Sandbox Code Playgroud)

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

<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;
}
Run Code Online (Sandbox Code Playgroud)

Jaq*_*har 5

这些线路:

<head> 
   <div class="splash_img">
     <img src="Images/bakemock.jpg" alt="bake"/>
   </div>
</head>
Run Code Online (Sandbox Code Playgroud)

无法工作。

您不能将 html 元素<div> <img>和许多其他元素放在<head>标签中。您的构建器标签应该在<body>唯一的内部。并且里面<body>不能有<head>标签。

两种可能

  1. 如果这部分在里面<body>并且不是指<head>上面的<body>那么把它改成<header>或类似的东西
  2. 如果此部分在上面,请<body>删除其中的 html 元素并<header>在您的<body>部分中放置一个标签

有效的 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>
Run Code Online (Sandbox Code Playgroud)

同样重要的注意事项

您不能放置background-image:和指定比背景图像 src本身更多的内容。如果要指定比源更多的内容,请background:改用

background: url("/Images/bakemock.jpg") no-repeat center;
Run Code Online (Sandbox Code Playgroud)

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

html, body {
   padding:0px;
   margin:0px;
}
Run Code Online (Sandbox Code Playgroud)

综上所述

这段代码对你有用

<!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>
Run Code Online (Sandbox Code Playgroud)

你也可以在这里看到它:

JSFiddle

希望能帮助到你。如果您有任何问题,请告诉我。