css - 如何拉伸和自动调整背景图像大小

2024-01-15

我试图让我的背景图像延伸到整个页面,但到目前为止我有这个:

这是我想要在浏览器窗口中拉伸的图片:

我的外部 CSS 包含以下代码:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")} 

谁能告诉我如何编辑 CSS 文件来解决我的问题?


您可以使用:

background-size: cover;

不过请记住支持哪些浏览器 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size。例如,这在 IE8 及更低版本中不起作用。

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

css - 如何拉伸和自动调整背景图像大小 的相关文章

  • Chrome 浏览器不显示 HTTP 处理程序生成的图像

    基本上我有一个网站 可以呈现一些文档 主要是办公室 的 HTML 预览 生成的 HTML 片段包含在同一网站返回的页面中 但图像由 HTTP 处理程序从具有以下链接的另一个网站返回 img width 50 height 50 src ht
  • grid-auto-columns 在 Firefox 中不能完全工作

    我不明白为什么 DIV 3 的大小与 DIV 1 DIV 2 的大小不同 https codepen io anon pen vaVqPW https codepen io anon pen vaVqPW grid display grid
  • 如何防止 CFDocument 中的内容中间发生分页?

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 当鼠标悬停在伪元素上时触发CSS动画?

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http
  • 使用日语“Enter”键进行搜索功能

    我在日语方面遇到了问题 我有一个允许用户搜索数据的表单 当用户输入要搜索的字符串并按 Enter 键时 搜索功能就会执行 我的代码是 formSearch input keyup function event var key event c
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • iOS 解决方法:在没有 CSS 属性的情况下平滑滚动 滚动行为:平滑?

    编辑 我找到了一个 jQuery 解决方案 https codepen io chriscoyier pen dpBMVP https codepen io chriscoyier pen dpBMVP这个确实可以在 iOS 上运行 我想
  • 同页锚链接到部分 id 在 IE8 中不起作用

    我有一个带有导航的单页 HTML5 网站 可以将用户引导至该部分 在除 IE8 之外的所有浏览器中都可以正常工作 IE8 不执行任何操作 我所拥有的虚拟版本 a href about About a a href work Work a a
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 如何在php中使用preg添加html属性

    我正在寻找在 php 中编写一个脚本来扫描 html 文档并根据它找到的内容向元素添加新标记 更具体地说 我是扫描文档并为每个元素搜索CSS标记 float right left 如果找到它 它会添加align right left 基于它
  • Django - 提交具有同一字段多个输入的表单

    预警 我对 Django 以及一般的 Web 开发 非常陌生 我使用 Django 托管一个基于 Web 的 UI 该 UI 将从简短的调查中获取用户输入 通过我用 Python 开发的一些分析来提供输入 然后在 UI 中呈现这些分析的可视
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • HTML 属性 bgcolor 已弃用:用什么代替?

    VStudio ASP NET 给出以下消息 Attribute bgcolor is considered outdated A newer construct is recommended 推荐的结构是什么 bgcolor是在一个 td

随机推荐