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>

上面这个才对!

 

关联内容: HTML CSS 背景 图片 大小
自适应网页设计(RWD)基础,概念、方法与规则教程
« 上一篇 2016年01月23日
解决Web部署中svg/woff/woff2字体404错误的教程
下一篇 » 2016年04月23日
  • 帝国CMS过滤HTML标签,自定义NOHTML函数用法详解
    1947阅读2条评论27个赞
    使用帝国CMS的NOHTML函数,可轻松过滤HTML标签,实现内容净化。自定义NOHTML函数,灵活设置过滤规则,确保网页内容安全合规。提高用户体验,简化内容管理,让您的网站更专业、更可靠。
  • CSS,Html,抖动
    11103阅读1条评论81个赞
    html,body{ overflow-y:scroll;} html,body{ overflow:scroll; min-height:101%;} html{ overflow:-moz-scrollbars-vertical;}
  • HTML5手机端专属底部客服按钮(含电话与微信)制作教程及模板下载
    64阅读0条评论0个赞
    想为手机网页添加便捷客服入口?本教程专为HTML5设计,教你打造手机端专属底部客服按钮,涵盖电话与微信两大常用联系方式。详细步骤讲解搭配实用模板实例,即使是新手也能轻松上手,快速实现网页客服功能升级,提升用户体验与沟通效率,快来下载教程开启优化之旅!
  • HTML5手机端仿微信底部菜单模板下载及完整代码
    32阅读0条评论0个赞
    HTML5精仿微信手机底部菜单模板,轻松打造移动端交互新体验!本教程详细解析如何利用HTML5技术,高度还原微信底部菜单样式与功能,包含完整代码与实例下载。无论是新手入门还是进阶开发者,都能快速掌握核心技巧,一键下载模板,快速集成至项目,提升界面交互友好度,让你的应用更贴近用户习惯。
  • 【简洁大方】公告提示HTML页面分享,快速构建优雅公告界面
    825阅读0条评论7个赞
    欢迎访问我们的公告提示页面!此页面设计简洁大方,一目了然。我们精选了一条重要信息,以醒目的方式呈现给您。无需繁琐操作,即可快速获取所需内容。希望我们的公告提示页面能为您带来便捷与舒适的使用体验。

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