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

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

转载作者：行者123 更新时间：2023-11-28 10:36:34

26

4

仍在学习 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;
}

最佳答案

这些行:

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

无法工作。

你不能放像<div>这样的html元素<img>和 <head> 中的许多其他人标签。您的构建器标签应该在 <body> 内仅有的。和 <body>不能有 <head>里面有标签。

两种可能性

如果此部分在 <body> 内并且不是指 <head>在 <body> 之上然后将其更改为 <header>或类似的东西
如果此部分在 <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>

同样重要的提示

你不能把 background-image:并指定多个背景图像 src 本身。如果你想指定的不只是来源，请使用 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

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

关于html - 如何使背景标题图像扩展到浏览器的全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37204429/

26

4

0

文章推荐： javascript - Ooxml 中不显示下划线

文章推荐： css - 获取奇怪的垂直滚动条

文章推荐： html - 调整大小时页面中的表格宽度问题

css - 窗口底部的位置标题+全宽
我有一个标题 1(#banner h1.index_banner_text)，它需要始终位于距页面底部 20 像素和距页面左侧 570 像素的位置。如果调整窗口大小，我希望标题自然堆叠，但始终与页面底
javascript - 倾斜底部边框 - 全宽
这个问题已经有答案了: CSS responsive slanted edge (1 个回答) 已关闭 7 年前。我想知道如何创建一个宽度为 100% 的 div，宽度为 300 像素，其中底部边框
jquery - 全宽 Accordion
我做了一个非常简单的水平全宽 Accordion ，但我遇到了一个错误 - 它的最后一部分在折叠过程中下降了。这是我的代码:https://jsfiddle.net/trzxs3u1/ 它可能来自同
html - 显示时图像未占据全高/全宽
我有两张相同的图片。我几乎一直显示其中一张图像，唯一的异常(exception)是在 1001px - 1400px 的视口(viewport)中，我显示图像的裁剪版本。由于某种原因，company-
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
html - Vimeo 全宽
这个问题在这里已经有了答案: How did YouTube create a fluid video player? (1 个回答) 关闭 5 天前。我正在尝试在网页中全宽显示一个 vimeo
jquery - Fancybox 全宽
我是编码新手，我试图只在我的 homepage 中使用每个 fancybox全宽和响应式 ( eg )，但这些选项都没有完成这项工作(fitToView、autoSize 或 aspectRatio)
markdown - 全宽 Markdown 表格
到目前为止，我已经在 Markdown 表格中获得了尽可能多的格式和居中文本，但是在控制相对于外部容器的表格尺寸方面我没有发现任何东西(至少除了当它太大时它会自动缩小的事实)换行文本。) 是否可以在
javascript - 全宽 Swiper 在幻灯片左侧有一个间隙
带有大屏幕的 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片左侧留下空白，我创建了一支笔来演示这一点: https://codepen.io/anon/pen/BwMx
c# - 如何使用 WebView 全宽
在我的 Windows 应用商店应用程序中，我只有一个 XAML 中的 WebView: 我想在不同的屏幕尺寸或方向上将宽度设置为最大可用值。我试图获取砂砾本身的宽度来设置 WebVi
android - 水平 ScrollView 全宽
好吧，我开发了一个 HorizontalScrollView，里面有一些按钮。我可以通过 getWidth() 获取此 HorizontalScrollView 的宽度。但这会返回显示的 H
javascript - jcrop 全宽/高度比例裁剪
我们实现了 Jcrop在我们的系统中，到目前为止它运行良好。但是我们最近发现了一个小问题: 场景我们的网站允许用户上传他们公司的标志。我们的宽高比要求是 200/150，不幸的是，用户的公司 Log
ios - 全宽 View 不包含与父级相同的框架宽度
我遇到一个问题，我的 UIImageView 使用以下约束跨越整个屏幕宽度。将前导对齐到:Superview(等于:-20) 将尾部对齐到:Superview(等于:-20) Top Space t
css - 全宽 div 内的响应式图像
我有这个标记: 和这个 css(我正在使用 Twitter Bootstrap): img { height: auto; max-width
javascript - 全宽、响应式、网格布局
谁能给我解释一下这个页面是如何运作的？ http://wexley-demo.squarespace.com/ 我看到有javascript，但不明白。这也是实现这种效果最简单的方法吗？ – 缩放、
javascript - 调整大小时 slider 全宽
我正在研究这个 slider : http://codepen.io/anon/pen/viBHe 当您打开页面时， slider 获得屏幕的 100% 宽度，这很好用，也是我想要实现的，但问题是当您
html - 全宽 SVG 剪辑
我目前正在为单页网站制作剪切路径: http://grafomantestsite3.be/ 如您所见，这适用于 chrome，但不适用于 firefox、opera 等。我做了一个代码笔来说明我的
html - 全宽 anchor 标签问题
代码如下: Overall Advance Rating(1 foodees rated) 这里也是在对图像进行评级后获得光标。我如何处理光标直到只有图像。我曾尝试使
jquery - 全宽 Bootstrap 下拉菜单
我正在尝试制作一个与此页面中的菜单类似的 Bootstrap 菜单。https://makr.com/ 这就是我想出的，但我现在几乎卡住了。如何使下拉文本显示在每个下拉按钮下方，就像在 https:
html - 全宽 Vimeo 嵌入无响应
我在 div 中嵌入了一个 vimeo，它是视口(viewport)的全宽。该视频在几天内运行良好，但现在播放按钮(和所有其他按钮)完全没有响应。我试过弄乱 z-index 但那不起作用。

首页

博学

6Ren·AI

商城