拉伸图像作为背景

2024-01-02

我需要将图像拉伸为页面背景。如果页面无法很好地缩放也没关系,无论屏幕分辨率如何,整个图像都必须在屏幕上可见。我在 Google 上找到了一些解决方案,但它要么在 Firefox2 或 IE6 中不起作用,要么在两者中都不起作用,我也需要这两个。 我讨厌人们不升级他们的软件,但我仍然在谷歌分析数据中看到这些浏览器点击网页,尤其是 IE6。

有没有好的跨浏览器解决方案?


您可以使用一个好的老式 img 标签,没有高度和宽度属性。在 CSS 中,将其绝对定位为低 z-index,将高度和宽度设置为“100%”。

将页面上的其他所有内容放在另一个具有更高 z-index 的 div 中

像这样:

<style type="text/css">
#stretchy {
    postion: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#everything_else {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>

...

<img src="/images/myimage.jpg" id="stretchy" />

<div id="everything_else">
    ...
</div>

See http://axoplasm.com/lost.html http://axoplasm.com/lost.html举个例子。

它不完全是一个“背景图像”(并且可能不符合 W3C 标准的 CSS),但它可以工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

拉伸图像作为背景 的相关文章

  • DIV 内的右对齐按钮

    作为一名后端开发人员 我感觉更舒服 但我有一个样式问题困扰着我 我已经发布了我的场景示例here http jsfiddle net jDaM8 1 我正在创建一个 div 它根据单击按钮显示 隐藏以显示特定项目的详细信息 该部分工作正常
  • 如何在MATLAB中显示由三个矩阵表示的图像?

    我有 3 个相同大小的 2D 矩阵 假设 200 行和 300 列 每个矩阵代表三种 基本 颜色 红色 绿色和蓝色 之一的值 矩阵的值可以在 0 到 255 之间 现在我想组合这些矩阵以将它们显示为彩色图像 200 x 300 像素 我怎样
  • Anchor Cycler / 下拉菜单定期导入学校班级数据

    SO 我最近一直在研究一些 html javascript css 为我的学生创建一个在线表格来查看详细信息 分数和各种信息 但我遇到了困难 不确定如何做我正在尝试的事情去做 我将所有这些内容发布在一个线程中的原因是因为我认为其中几个可能会
  • 将按钮固定到容器的底角

    我正在使用 Flexbox 使表单垂直和水平居中 在此表单中 我想将一个按钮固定到 Flexbox 容器的右下角 我不知道如何将按钮固定在右下角 html body height 100 container height 100 displ
  • 判断位图是否全黑的有效方法是什么?

    我想知道是否有一种超级有效的方法来确认 Image 对象引用全黑图像 因此位图中的每个像素都是 ARGB 255 0 0 0 你会推荐什么 大多数位图的尺寸为 1024 x 6000 像素 尽管假设它们始终是该尺寸并不安全 我需要这个 因为
  • 最小高度:自动在 Opera 中不起作用

    我注意到min height不在 Opera 中工作 我正在尝试这样的事情 div class content div div class content newstyle div 我的 CSS 代码是 content min height
  • 的 CSS margin-top 影响父级的边距

    我已经研究这个问题有一段时间了 但还没有找到直接的答案 当向元素添加页边距顶部时 就我而言 它主要发生在标题上 在许多情况下 边距顶部是与父级共享的 HTML div h1 My title h1 div CSS div padding 2

  • css 表格单元格,内容有不必要的上边距

    我在代码中使用 div 块的表格单元格排列 我的代码有问题 我的 html 的预览是here http jsbin com avozik 10 edit preview 当我的第一个面板中有任何内容 文本或图像 时 inner第二个和第三个
  • 如何在 MAMP 上显示错误?

    我有 MAMP 但我不知道如何在其上显示错误 当我的 php 代码出现错误时 它只显示空白页 我在 Google 上搜索过 我发现我必须在所有文件夹和版本上将其更改为 display errors on 并将其包含在我的页面上 错误报告 E
  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显
  • PHP/HTML - 如何在表单输入名称中保留空格?

    我有一个带有输入的表单type text和name属性中有空格 当表单提交时 它使用post 空格怎么保留 目前是用下划线替换空格 在输入名称中使用数组
  • 有史以来最复杂的 CSS 渲染错误 (IE9)

    在 IE9 中看一下 http jsfiddle net dalgard n6PDB show http jsfiddle net dalgard n6PDB show screen dump 阅读这些评论 IE9 Upon moving
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • Bootstrap 的跨浏览器数字微调器/步进器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 Twitter Bootstrap 2 3 集成的数字微调器 使用 HTML5input type number
  • 角度按钮单击旋转图标

    我有以下按钮
  • PHP 在数组内循环

    我怎样才能在一个内部循环array在我的代码中 这是我的脚本的静态版本 val array array value gt Male label gt Male array value gt Female label gt Femal my
  • 避免滚轮被嵌入的 youtube / flash 视频劫持

    我正在对主页中嵌入 YouTube 视频的网站进行一些改进 我自己没有添加此代码 但它看起来像
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • 如何将 .ashx 处理程序与 asp:Image 对象一起使用?

    我有一个 ashx 处理程序 using System using System Web public class Thumbnail IHttpHandler public void ProcessRequest HttpContext
  • localStorage 获取 NULL?

    我不知道为什么 因为我之前已经这样做过并且工作正常 我认为这可能是因为浏览器问题 错误 localStorage setItem foo bar alert localStorage getItem foo 我使用的是 Firefox 3

随机推荐