-
-
leiz 小试身手Lv3
发表于2020-9-2 13:49
楼主
我们在使用门户的过程中，经常会遇到设置了背景图片后，在当前使用的电脑上预览效果是正常的，但是换了其他分辨率不同的电脑预览时，图片的大小就变了，怎么避免这个问题呢？可以尝试下面这个办法：
我们用系统自带的梦星蓝门户为例，如图，在容器外层上设置一个背景图片：
当改变屏幕缩放比例后，可以看到因为图片本身跟屏幕分辨率不一致，缩放后图片会重复铺满屏幕，这样的话就不是很美观：
这个时候只需要在门户的源代码中加一条属性background-size:100% 100%;即可解决，如图所示：
示例中是在容器外层上加的背景图片，所以在源代码中，只需要找到容器外层对应的div,即找到对应组件标识container1的div，然后在style中添加background-size:100% 100%;
最后预览可以看到，无论怎样缩放屏幕，图片始终是撑满整个屏幕的：
PS：如果是自定义的门户也是同样的方法去添加
我们用系统自带的梦星蓝门户为例，如图，在容器外层上设置一个背景图片：
当改变屏幕缩放比例后，可以看到因为图片本身跟屏幕分辨率不一致，缩放后图片会重复铺满屏幕，这样的话就不是很美观：
这个时候只需要在门户的源代码中加一条属性background-size:100% 100%;即可解决，如图所示：
示例中是在容器外层上加的背景图片，所以在源代码中，只需要找到容器外层对应的div,即找到对应组件标识container1的div，然后在style中添加background-size:100% 100%;
最后预览可以看到，无论怎样缩放屏幕，图片始终是撑满整个屏幕的：
PS：如果是自定义的门户也是同样的方法去添加
