HTML中通过CSS设置背景图片自适应浏览器大小

HTML中通过CSS设置背景图片自适应浏览器大小

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2016-01-23 14:02:19
文章简介

HTML中利用CSS实现背景图片自适应浏览器大小教程:通过CSS的`background-size`属性,可以轻松设置背景图片根据浏览器窗口大小自动调整。使用`background-size: cover;`让图片覆盖整个窗口并保持比例;或`background-size: contain;`确保图片完整显示且适应窗口。结合`background-position`调整图片位置,实现完美自适应效果。

  • 正文开始
  • 相关阅读
  • 推荐作品
<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">   <img src="pictures/background.jpg" height="100%" width="100%"/>   </div>

这个上面是通用一般的写法

意思就是在你想设置背景的DIV中,添加以上代码,把这个DIV设置为底层,你的其他内容会浮在这个DIV上面,修改你的img src路径就可以了。

但是对于很多浏览器来讲还是有问题,因为它预知你的浏览器是一个,如果用户接了个扩展显示器,就是有2个或者3个显示器,怎么搞?这特么的肯定不对啊,height="100%"这个是根据你的屏幕分辨率来的,不是你的浏览器的大小

 

所以我们要引入JS,最简单的就是用jquery了

调整为如下代码:

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
	$('#formbackground').height($(window).height());
	$('#formbackground').width($(window).width());
});
</script>

上面这个才对!

 

自适应网页设计(Responsive Web Design)的基础方法概念和规则
« 上一篇 2016年01月23日
解决Web部署 svg/woff/woff2字体 404错误
下一篇 » 2016年04月23日
  • 小米路由器R1D:无线WIFI无法连接且REST复位失效的修复实录
    13阅读0条评论0个赞
    家人们!家里的小米路由器R1D用久了出现故障,手机能搜到 WIFI 却连不上,电脑也分配不了 IP,重置还不管用?别慌!本文作者亲测有效,详细分享了从故障排查、原因分析,到下载官方 ROM、准备工具、硬盘分区,再到刷机修复的全流程操作。手把手教你让老旧路由器重焕生机,有类似困扰的赶紧码住!
  • 帝国CMS默认列表内容模板list.var调用morepic字段的方法
    56阅读0条评论1个赞
    《帝国CMS列表模板list.var调用morepic字段教程》:想在帝国CMS默认列表内容模板里调用morepic字段却不知如何操作?别担心,本教程为你详细讲解。通过简单几步设置,就能轻松实现该字段调用,让列表展示更丰富多元,满足你多样化的网页内容呈现需求,快速提升网页展示效果。
  • 宝塔邮局的DKIM记录无法设置,重装、修复都没用,重装Rspamd解决
    113阅读0条评论0个赞
    宝塔邮局DKIM记录设置失败,重装及修复尝试均无效。解决方案:重装Rspamd。详细教程指引,助您解决难题。不再为DKIM配置困扰,通过重装Rspamd,轻松实现邮件认证设置。无论您是遇到配置错误还是功能失效,本教程都将提供有效路径,确保邮件安全发送与接收。一试即知,让您的宝塔邮局运行更加顺畅。
  • 微软bing IndexNow的推送和管理-帝国CMS插件500点
    309阅读0条评论3个赞
    微软Bing IndexNow推送管理插件,专为帝国CMS打造。本教程指导您如何高效利用该插件,实现网站内容快速被Bing搜索引擎收录。通过简单配置,即可自动化推送新发布或更新的页面至Bing,加速索引过程,提升网站SEO效果。轻松管理推送历史,监控索引状态,确保网站内容及时展现给目标用户。优化网站可见性,从掌握Bing IndexNow推送管理开始。
  • 帝国CMS8.0测试版搜索结果页只显示第1页的解决方法
    127阅读0条评论1个赞
    对于刚安装帝国CMS8.0测试版尝鲜的小伙伴们可能发现,使用高级搜索的时候结果页只显示第1页,虽然帝国CMS开发者说正式版会解决此问题,但是临时使用还是要先解决这个问题的。所以今天墨鱼就说下临时的解决方法。

如本文对您有帮助,就请墨鱼抽根烟吧!