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>

上面这个才对!

 

自适应网页设计(RWD)基础,概念、方法与规则教程
« 上一篇 2016年01月23日
解决Web部署中svg/woff/woff2字体404错误的教程
下一篇 » 2016年04月23日
  • 全设备自适应网站侧边客服源码,含手机端支持 已提供下载
    145阅读0条评论0个赞
    这款客服代码是墨鱼搭建网站时的常备工具,它的功能十分全面,同时兼容电脑网页端与手机移动端,涵盖了 QQ 客服、电话客服、微信客服等主流对接渠道。而且各个功能按钮的交互逻辑清晰直观,操作便捷流畅,非常推荐大家使用!
  • HTML5手机端专属底部客服按钮(含电话与微信)制作教程及模板下载
    49阅读0条评论0个赞
    想为手机网页添加便捷客服入口?本教程专为HTML5设计,教你打造手机端专属底部客服按钮,涵盖电话与微信两大常用联系方式。详细步骤讲解搭配实用模板实例,即使是新手也能轻松上手,快速实现网页客服功能升级,提升用户体验与沟通效率,快来下载教程开启优化之旅!
  • HTML5手机端仿微信底部菜单模板下载及完整代码
    24阅读0条评论0个赞
    HTML5精仿微信手机底部菜单模板,轻松打造移动端交互新体验!本教程详细解析如何利用HTML5技术,高度还原微信底部菜单样式与功能,包含完整代码与实例下载。无论是新手入门还是进阶开发者,都能快速掌握核心技巧,一键下载模板,快速集成至项目,提升界面交互友好度,让你的应用更贴近用户习惯。
  • 帝国ECMS8.0后台界面美化完整版下载及操作指南
    94阅读0条评论0个赞
    想让帝国ECMS8.0后台页面焕然一新?本教程为你提供后台页面美化完整版下载指南,详细步骤搭配实用技巧,从下载资源获取到安装美化包,再到最终效果呈现,全程清晰指引。无需复杂操作,即使是新手也能轻松上手,快速打造出美观又实用的后台管理界面,提升操作体验与工作效率,赶快下载尝试吧!
  • 威欧卡GTX1660TI显卡驱动怎么安装?贴牌/魔改显卡通用安装教程
    15阅读0条评论0个赞
    电脑重装后显卡不被识别?驱动安装失败?当你拆机后发现是张不知名的贴牌显卡时,按照常规方法往往行不通。别担心,本文针对这类贴牌/杂牌/魔改显卡(如威欧卡GTX1660Ti等)的驱动安装难题,提供了经过实测的有效解决方案。

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