如何使背景标题图像扩展到浏览器的全宽
Posted
技术标签:
【中文标题】如何使背景标题图像扩展到浏览器的全宽【英文标题】：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" />
</div>
</head>
.splash_img:
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%;
height:630px;
【问题讨论】：
你的意思是有 等。标题
标签应该只包含关于页面的元数据，内容元素应该在 中。 之外的元素不会被渲染
【参考方案1】：
这些行：
<head>
<div class="splash_img">
<img src="Images/bakemock.jpg" />
</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 的样式标签。然后注意到<img> 元素放在<header> 内。您只需使用background-image 设置标题样式。如果这是您想要的，请查看我在答案中输入的 JSFiddle，看看是否可以。如果没问题，那么我发布的代码也应该可以工作。如果它不起作用，您可能需要将背景 url 路径更改为图像库。您可以通过放置小提琴中的背景 url 路径来测试它。希望它有所帮助:)【参考方案2】：
你可以这样做：
HTML：
<div class="splash_img">
<img src="Images/bakemock.jpg" />
</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>
绝对没有空格和间隙
【讨论】：
以上是关于如何使背景标题图像扩展到浏览器的全宽的主要内容，如果未能解决你的问题，请参考以下文章