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日
  • 宝塔邮局的DKIM记录无法设置,重装、修复都没用,重装Rspamd解决
    28阅读0条评论0个赞
    宝塔邮局DKIM记录设置失败,重装及修复尝试均无效。解决方案:重装Rspamd。详细教程指引,助您解决难题。不再为DKIM配置困扰,通过重装Rspamd,轻松实现邮件认证设置。无论您是遇到配置错误还是功能失效,本教程都将提供有效路径,确保邮件安全发送与接收。一试即知,让您的宝塔邮局运行更加顺畅。
  • 微软bing IndexNow的推送和管理-帝国CMS插件500点
    187阅读0条评论3个赞
    微软Bing IndexNow推送管理插件,专为帝国CMS打造。本教程指导您如何高效利用该插件,实现网站内容快速被Bing搜索引擎收录。通过简单配置,即可自动化推送新发布或更新的页面至Bing,加速索引过程,提升网站SEO效果。轻松管理推送历史,监控索引状态,确保网站内容及时展现给目标用户。优化网站可见性,从掌握Bing IndexNow推送管理开始。
  • 帝国CMS8.0测试版搜索结果页只显示第1页的解决方法
    102阅读0条评论1个赞
    对于刚安装帝国CMS8.0测试版尝鲜的小伙伴们可能发现,使用高级搜索的时候结果页只显示第1页,虽然帝国CMS开发者说正式版会解决此问题,但是临时使用还是要先解决这个问题的。所以今天墨鱼就说下临时的解决方法。
  • 【优化分享】帝国CMS大数据量筛选性能瓶颈突破实践
    262阅读0条评论6个赞
    突破帝国CMS大数据筛选性能瓶颈实战教程:掌握高效技巧,轻松应对海量数据处理挑战。本教程详解性能优化策略,助力快速筛选,提升系统响应速度。无论你是开发者还是管理员,都能从中获益,实现数据筛选效率飞跃,让帝国CMS在大数据环境下依然流畅运行。立即学习,解锁大数据处理新技能!
  • 帝国CMS统计多个数据表今日更新总数代码
    179阅读0条评论5个赞
    帝国CMS统计多表今日更新总数代码教程:通过SQL查询结合帝国CMS函数,汇总多个数据表中今日更新的记录总数。步骤包括编写SQL联合查询语句,利用`DATE()`函数筛选今日数据,结合帝国CMS的数据库操作函数执行查询,并输出结果。此教程教你高效获取多表今日更新概况,优化管理效率。

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