html - 在减小浏览器大小时，使背景填充 100% 浏览器的任何编码-6ren

html - 在减小浏览器大小时，使背景填充 100% 浏览器的任何编码

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

26

4

我试图让我的背景变得固定，即使浏览器变小并且内容运行到底部也是如此。

我现在面临的问题是，我的背景尺寸不是标准尺寸 1366*768，我现在的尺寸是 1366*1000，因此我的网站可以滚动。

当浏览器变小，内容变窄的时候，我的背景无法固定下半部分内容，底部会出现白色区域，请问有什么方法可以解决吗？

谢谢

CSS:

body {
    background-attachment: scroll;
    background-image: url(img/homebg.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: 100% 100%, auto;
    -o-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
    height: 100%;
    background-size: cover;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: KaiTi, "Century Gothic";
    font-size: 100%;
    line-height: 1.4;
}

html {
    height: 100%;
    padding: 0;
    margin: 0;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

已更新(我说的对吗？)

body {
    background: url(img/homebg.png) no-repeat top left scroll;
    background-size: auto auto;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: KaiTi, "Century Gothic";
    font-size: 100%;
    line-height: 1.4;
}

html {
    height:100%;
    padding:0;
    margin:0;
}

</style>
</head>

<body>
<script>
function resizeIt() {
    $("body").css("background-size", $(document).width() + "px " + $(document).height() +"px");
}
$(window).resize(function () {
    resizeIt();
});
resizeIt();
</script>
</body>

最佳答案

您可以尝试以下方法:

CSS

body {
    background: url(yourImage.jpg) no-repeat top left scroll;
    background-size: auto auto;
    color: #000;
    font-family: KaiTi, "Century Gothic";
    font-size: 100%;
    line-height: 1.4;
}
.container {
    margin: 0 auto;
}

jQuery

function resizeIt() {
    $("body").css("background-size", $(document).width() + "px " + $(document).height() + "px");
}
$(window).resize(function () {
    resizeIt();
});
resizeIt();

演示: http://jsfiddle.net/thauwa/P7GM4/

关于html - 在减小浏览器大小时，使背景填充 100% 浏览器的任何编码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24505883/

26

4

0

文章推荐： html - W3 验证 HTML 错误

文章推荐： asp.net - jQuery 和 LinkButtons，或常规按钮和 CSS

文章推荐： javascript - 优化 onMouseMove 驱动的动画

css - 网站的自定义 CSS 编码/编码 block
我对自定义 CSS 或在将图像作为 Logo 上传到页面时使用编码 block 有疑问。我正在为我的网站使用 squarespace，我需要帮助编码我的 Logo 以使其适合每个页面。一个选项是使用自
Golang 编码/json 编码(marshal)拆收器
如 encoding/json 包文档中所述， Marshal traverses the value v recursively. If an encountered value implement
Java 编码 - 相当于 Java 中的 sjisMS 编码
我必须做一些相当于Java中的iconv -f utf8 -t sjisMS $INPUT_FILE的事情。该命令在 Unix 中我在java中没有找到任何带有sjisMS的编码。 Java中有Sh
PHP 5.6 编码 latin1 MySQL 编码
从 PHP 5.3 迁移到 PHP 5.6 后，我遇到了编码问题。我的 MySQL 数据库是 latin1，我的 PHP 文件是 windows-1251。现在一切都显示为“ñëåäíèòå àäðå
r - 文件错误(文件名， "r"，编码=编码): cannot open the connection
我有一个 RScript文件(我们称之为 main.r )，它引用了另一个文件，使用以下代码: source("functions.R") 但是，当我运行 RScript 文件时，它提示以下错误:
java - 处理 RPC/编码 Web 服务中的 SOAP 编码
我无法设法从 WSDL 创建 RPC/编码风格的代码 - 有谁知道哪个框架可以做到这一点？带有 adb 和 xmlbeans 映射的 Axis2 无法正常工作(无法处理响应中的肥皂编码)直接使用 X
Node.Js Express-Generator 项目生成器错误(编码 && 编码.toLowerCase()
安装了最新版本的Node.Js()和npm包**(1.2.10)**当我运行 Express 命令来生成项目时，它向我抛出以下错误 buffer.js:240 switch (encoding &
javascript - JavaScript 中的 JSON 编码/解码 base64 编码/解码
JavaScript中有JSON编码/解码base64编码/解码函数吗？最佳答案是的，btoa() 和 atob() 在某些浏览器中可以工作: var enc = btoa("this is so
python - 为什么有些字符串采用 utf-16 编码，而另一些字符串仅采用 utf-8 编码？
>>> unicode('восстановление информации', 'utf-16') Traceback (most recent call last): File "", line
html - 是否有一个 JDK 类来进行 HTML 编码(但不是 URL 编码)？
我当然熟悉 java.net.URLEncoder 和 java.net.URLDecoder 类。但是，我只需要 HTML 样式的编码。 (我不想将 ' ' 替换为 '+' 等)。我不知道任何只做
utf-8 - SSIS - 平面文件始终采用 ANSI 编码，从不采用 UTF-8 编码
有一个非常简单的 SSIS 包: OLE DB Source 通过 View 获取数据(数据库表 nvarchar 或 nchar 中的所有字符串列)。派生列，用于格式化现有日期并将其添加到数据集(
node.js - golang base64 编码 vs nodejs 缓冲区 base64 编码
我正在使用一个在 Node 中进行base64编码的软件，如下所示: const enc = new Buffer('test', 'base64') console.log(enc) 显示: 我正
hibernate 编码
我试图将带有日语字符的数据插入到 oracle 数据库中。事情是保存在数据库中的是一堆倒置的问号。我该如何解决这个问题最佳答案见 http://www.errcode.net/blogs/?p=6
Java解压奇怪的字符(编码？)
当我在 java 中解压 zip 文件时，我发现文件名中出现了带有重音字符的奇怪行为。西索: Add File user : L'equipe Technique -- Folder : spec
JavaScript 编码
在网上冲浪我找到了 ExtJS 的 Ext.Gantt 插件，该扩展有一个特殊的编码。任何人都知道如何编码那样或其他复杂的形式。 Encoded Gantt Chart 最佳答案它似乎被 Dean
编码，将一个整数写入文件中
我正在用C语言做一个编码任务，我进展顺利，直到读取符号并根据表格分配相应的代码的部分。我必须连接几个代码，直到它们的长度达到 32 位，为此我必须将它们写入一个文件中。这种写入文件的方法给我带来了很多
Javascript 编码
我有一个外部链接的 javascript 文件。在那个 javascript 里面，我有这个功能: function getMonthNumber(monthName){ monthName = mo
python 编码
使用mechanize，我检索到一个网页的源页面，其中包含一些非ASCII字符，比如汉字。代码如下: #using python2.6 from mechanize import Browser b
读取文件时的C#编码
我有一个包含字母 ø 的文件。当我用这段代码 File.ReadLines(filePath) 读取它时，我得到了一个问号而不是它。当我像这样添加编码时 File.ReadLines(filePat
python特殊字符解码/编码
如何翻译下面的字符串 H.P. Dembinski, B. K\'{e}gl, I.C. Mari\c{s}, M. Roth, D. Veberi\v{c} 进入 H. P. Dembinski,

首页

博学

6Ren·AI

商城

html - 在减小浏览器大小时，使背景填充 100% 浏览器的任何编码