跨浏览器背景覆盖的最佳方式

2024-01-23

我有一个 1024*768px 的图像,我想将其用作网页的背景。

我还希望这个背景覆盖整个窗口的背景,即使它调整了大小。而且......我不希望图像拉伸得尽可能少!

我已经尝试过这里的示例,除了 jquery 之外 - 因为我更喜欢仅在 css 中完成。

谢谢你!

编辑:这是链接:http://css-tricks.com/perfect-full-page-background-image/ http://css-tricks.com/perfect-full-page-background-image/


您可以尝试 backstretch 插件

这是一个单行 javascript 解决方案,只需将其(也包括 jquery)包含在标头中并将其作为示例调用:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    // To attach Backstrech as the body's background
    $.backstretch("path/to/image.jpg");
</script>

官方网站:http://srobbin.com/jquery-plugins/backstretch/ http://srobbin.com/jquery-plugins/backstretch/

GitHub来源:https://github.com/srobbin/jquery-backstretch https://github.com/srobbin/jquery-backstretch

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

跨浏览器背景覆盖的最佳方式 的相关文章

  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • Firefox 忽略背景大小的 css

    尝试使用背景大小 CSS 规则缩小图像 但 Firefox 3 5 似乎会忽略该规则 CSS privatejoker background aqua url styles images home privatejoker png no r
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • CSS 选择器用于选择最后两个子项,而不知道列表中有多少项

    我有一个无序列表 它有时包含 4 5 6 或 7 个项目 我想知道是否有一个 CSS 选择器来选择最后两项 我意识到 last child会给我最后一件物品 是否有 倒数第二个孩子 选择器 或者 孩子数量 2 选择器 HTML ul li
  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • 是否有针对 CSS 位置和可点击区域的 Android 浏览器错误的解决方法?

    当您有一些可点击的内容时 例如 a a
  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i
  • SwiftUI 全屏图像背景

    我想在背景中显示全屏图像 我已经实现了这个 struct LoginView View var body some View VStack Spacer Text Hallo Text Hallo2 Text Hallo2 Text Hal
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐