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日
  • 帝国CMS统计多个数据表今日更新总数代码
    40阅读0条评论0个赞
    帝国CMS统计多表今日更新总数代码教程:通过SQL查询结合帝国CMS函数,汇总多个数据表中今日更新的记录总数。步骤包括编写SQL联合查询语句,利用`DATE()`函数筛选今日数据,结合帝国CMS的数据库操作函数执行查询,并输出结果。此教程教你高效获取多表今日更新概况,优化管理效率。
  • 家用电脑或笔记本安装WINDOWS SERVER版本,出现未知设备(叹号)的解决办法
    27阅读0条评论0个赞
    家用电脑或笔记本安装Windows Server版后,若遇到未知设备(显示叹号)问题,可按以下教程解决:首先,确认设备管理器中未知设备的详细信息;其次,访问硬件制造商官网,下载并安装对应的驱动程序;若官网无支持Server版的驱动,尝试通用驱动或兼容模式安装;最后,重启计算机检查设备是否识别。若问题依旧,考虑系统兼容性或寻求专业技术支持。
  • 自动识别图片颜色代码,PHP版本
    68阅读0条评论1个赞
    自动识别图片颜色代码PHP教程:学习如何用PHP脚本自动提取图片中的颜色代码。无需手动选取,脚本自动分析图片像素,输出主要颜色或特定颜色代码。适合网页设计师和开发者,快速获取配色方案。通过简单步骤,加载图片、运行脚本,即可获取颜色信息。提升工作效率,让颜色识别自动化。本教程简洁明了,适合初学者快速上手。
  • bat批处理,要求根据文件列表里面的文件名称,删除目录里不在文件列表里的文件,并生成一个删除的文件列表
    27阅读0条评论0个赞
    使用BAT批处理脚本,可根据文件列表清理目录中多余文件,并生成删除文件记录。步骤:1.创建包含需保留文件名的列表文件。2.编写BAT脚本,遍历目录文件,对比列表,删除不在列表中的文件,并记录删除的文件名至新列表。3.运行脚本,完成清理及记录。此教程旨在简化文件管理,确保目录仅含必需文件,同时提供删除文件清单以备查。
  • 帝国cms7.5无刷新 Ajax 点击加载更多列表信息源代码
    730阅读2条评论10个赞
    帝国CMS 7.5 Ajax无刷新加载,高效实现点击加载更多列表信息,精简源码仅展示核心功能,优化用户体验,提升网页加载效率。

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