背景图片占满整个屏幕

①CSS处理方法(仅IE) 

复制代码
代码如下:

#backGroundImg { 
background-image: url("X.png"); 
background-repeat: no-repeat; 
filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上这个,详细可Google*/ 



②把背景图片做的足够大; 
一般情况下,我们设计给我的图都是1440*900的极限,然后居中显示就会适应大部分的屏幕了。可是现在显示器越来越大,加上Mac下Retina屏超高分辨率的虐待...当分辨率超过背景图大小时,边上就会变成背景色了。 
所以最直观的方法就是将背景图的大小,翻倍,翻倍,再翻倍....只要超过主流浏览器最大分辨率就好了。 
不过弊端很明显,过大的图片会极大的影响网页的加载速度。 

③用Js/jQuery控制大小(这其实是种假象的背景自适应) 
利用加入个<img>标签,将z-index设置的低一些,然后用Js/jQuery监视窗口大小,然后改变图片的长宽就好了。(详细Google) 
不过,这种方法,当图片被拉伸或压缩的过于严重的时候会非常可怕的..... 
而且,如果屏蔽右键功能会很蛋疼;不屏蔽右键功能就露怯了。 

④利用<img>元素自适应。 
这个其实和③差不多,如果是整个网页的背景,在起始<body>后马上加上<img>然后将CSS设置 
width:100%; 
height:100%; 
这样,图片就会随着浏览器的放大缩小自动缩放了。弊端也和③差不多。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一种跨平台的应用开发框架,可以用于开发移动应用和小程序。在uniapp中,可以为页面设置背景图片,但是有时候会出现背景图片无法占满整个屏幕的情况。 造成背景图片占不满屏幕的原因可能有多种。一种可能是图片尺寸不适配屏幕,导致图片无法完全填充屏幕。在这种情况下,我们可以尝试使用CSS的background-size属性来调整背景图片的尺寸,使其适合屏幕大小。比如设置background-size: cover;可以让背景图片自动缩放,保持宽高比例并填充满整个屏幕。 另一种可能是uniapp页面的布局设置不正确,导致背景图片无法占满整个屏幕。如果页面布局使用了固定的高度或宽度,可能会造成背景图片显示不全。在这种情况下,我们可以尝试使用CSS布局属性来调整页面的布局,使其自适应屏幕大小。比如设置height: 100%;可以让页面高度自动适应屏幕高度,从而让背景图片完整显示。 除了上述两种情况外,还有可能是其他UI样式或代码逻辑导致背景图片无法完全显示。在这种情况下,我们需要仔细检查代码,找出可能导致问题的部分,并进行相应修正。 总结来说,uniapp背景图片占不满屏幕的原因可能是图片尺寸不适配、页面布局设置不正确或其他代码问题。我们可以尝试使用CSS的相关属性来调整背景图片的尺寸和页面布局,从而让背景图片完整显示。如果问题仍然存在,我们需要仔细检查代码并进行修正。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值