背景图片能自适应吗

Question

page{
background-image: url(xxxxx);
}

.container{
background-image: url(xxxxx); 
}

发现这上面的两种办法都没有办法自适应，怎样解决，网络的图片是可以显示的

额，解决的方法还是我自己回答了，采纳一下老师的答案，谢谢老师的启发

Answer 1

7七月 2017-01-25 16:28:55

你可以给你的背景容器一个大小，并指定单位为rpx吗？

• 提问者 ap0stader #1

  是写在page上，还是直接写在view的样式container上

• 7七月 回复 提问者 ap0stader #2

  view的container上试试

• 提问者 ap0stader 回复 7七月 #3

  很明显，没有任何的作用，依然是我行我素，没有改变，虽然用了rpx

点开查看后面1条评论

Answer 2

7七月 2017-01-26 16:55:59

这样还不如设置一个image放在下面，其他的元素都浮动上去

• 提问者 ap0stader #1

  好像这样是不行的，用float属性再上也只能到图片下面，image组件上好像不能有叠加

• 提问者 ap0stader #2

  如果老师有方法可以给给代码

• 7七月 回复 提问者 ap0stader #3

  文章详情页面里面的头图上不是就浮动了音乐播放图片吗？还有电影搜索也是浮动的案例呀

Answer 3

7七月 2017-01-25 14:29:36

您说的自适应能具体一些描述吗

• 提问者 ap0stader #1

  是这样的，我在我开发的小程序的欢迎界面上用上面的方式设置了一张网络图片作为背景图片，在iPhone6上可以正常显示，铺满全屏，但是换到Nexus6上面则无法铺满全屏，而是按照图片再iPhone6上的显示方式，并且还填充了这个图片的一部分。

• 提问者 ap0stader #2

  我是想小程序有没有办法让这张图片想image组件那样，能自适应设备分辨率来缩放图片，使图片铺满全屏

Answer 4

小爽子 2017-03-08 10:35:11

设置背景图片的时候，插入本地图片，开发者工具上显示，但真机上为什么不显示呢

• 提问者 ap0stader #1

  请插入一张网络图片，这个不需要https

Answer 5

提问者 ap0stader 2017-01-26 15:41:45

还是我自己回答吧，查了下CSS用下面的方法是可以实现的，只是iPhone4上有一点点瑕疵

  /*设置背景色为图片的底色以适配机型*/
  background-color: #a67e84;
  /*设置背景不允许随屏幕滚动而移动*/
  background-attachment: fixed;
  /*指定背景的大小为设备的大小*/
  background-size: 750rpx 1250rpx;
  /*设置背景的图片*/
  background-image: url(xxxxx);
  /*不允许背景的重复*/
  background-repeat: no-repeat;
  /*让背景停靠在屏幕底端的中间*/
  background-position: bottom center;