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日
  • CSS background-size属性深度解析,cover与contain在背景图片填充div中的实践探索
    1928阅读1条评论15个赞
    CSS的`background-size`属性可控制背景图片大小,其中`cover`可确保图片完全覆盖div并保持宽高比,而`contain`则保证图片完整显示在div内,但可能留有空白。根据实际需求选择合适的属性,实现背景图片完美填充div的效果。
  • swiper自适应图片高度,CSS一招解决!
    1563阅读1条评论11个赞
    轻松解决swiper图片高度自适应难题,只需一句CSS代码,即可实现灵活适应各种屏幕尺寸。无需复杂设置,让你的网页展示更加美观,用户体验更加流畅。简单高效,赶快尝试吧!
  • 帝国CMS内容页,简易调整字号大小技巧(通用前端方法)
    2191阅读0条评论50个赞
    帝国CMS内容页轻松调整字号大小,提升阅读体验。通用前端技巧,点击即可放大或缩小文字,适应不同用户需求,让网页浏览更加便捷舒适。简单操作,轻松掌握。
  • 图片自适应浏览器窗口大小的JS实现教程
    1666阅读0条评论100个赞
    使用JavaScript实现图片自适应浏览器窗口大小的方法!教程简述:通过JavaScript监听窗口大小变化事件,动态调整图片尺寸以适应窗口。首先获取图片元素,然后编写函数根据当前窗口宽度计算新图片尺寸,最后添加事件监听器,在窗口大小改变时调用该函数。这样,无论用户如何调整浏览器窗口,图片都能完美适应,提升网页浏览体验。
  • jQuery原生实现图片大小调整与排列特效教程
    986阅读0条评论114个赞
    原生jQuery实现图片大小调整与排列特效教程:学习如何利用jQuery轻松调整网页中图片的尺寸和排列方式。本教程将指导你通过简单代码实现图片的动态布局调整,无论是响应式设计还是自定义排列,都能灵活应对。无需复杂插件,原生jQuery即可满足需求,提升网页视觉效果和用户体验。快速掌握技巧,让图片展示更加美观和专业。

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