移动端body高是100%,背景图全屏,如何让背景图上的内容固定在想要的位置

如果设置backgroundsize:100%的话,图片会随设备拉伸,那么里面内容的margin值是固定的,位置就会受到影响。请问该怎么解决呢?

阅读 7.3k
9 个回答

这种情况我做移动端开发的时候也遇到过,当时试了很多,例如百分比布局和CSS3的媒体查询,现在来看百分比并不是很准确,建议用CSS3媒体查询,或者用rem布局的话,就写死background-position的值,如果还有别的机型有适配问题,就只能用媒体查询去写死对应的样式了。

固定在想要的位置,这个问题没看懂。
是要背景图居中吗? background-position: center;
还是要宽度百分百,高度自适应:background-size: cover;body设置overflow: hidden属性

内容设置为position:fixed;相对屏幕定位器试试

不是很明白你的意思 手机上可以用css3全屏啊 做法很多 百度一堆堆的.

这个简单,固定一下你的viewport就行了,在所有手机上显示就一致了

如果图片比例不变,可以根据“margin百分比都是根据宽度来决定的”这个特性来做,但是如果图片比例变化,要用js来做。

margin值不要用px,用百分比

背景给个cover,反正你背景也不变,你把背景位置固定之后,元素给固定的margin也没啥问题啊

建议用等于或者大于全屏的高度噢,background-size: 100% auto,这样图片不会压缩

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题