weex布局（2）之background

官方给出了一些常用的样式，但是这些远不能满足日常开发的需要。因此笔者为了开发需要尝试一些开发中常用的属性。官方的文档跟它所能支持的样式不完全一致，所以可以通过读源码的方式去探索weex的样式。

---

首先我所用的weex版本是0.4.4。测试用的手机包括苹果6，小米4，测试的浏览器主要是微信浏览器。笔者只测试了weex的html5，不保证native的支持情况。

---

1.测试background:color

测试代码为：

<template>
  <div style="width:750;height:400;background:red">
  </div>
</template>

在浏览器中展示的效果为：

图为谷歌浏览器器中截图，其他浏览器中亲测没问题

2.测试background：url()

测试代码为：

<div style="width:750;height:1334;background: url(/bg.png);background-size:cover;">
</div>

显示效果为：

上图中图片重复了。

3.测试background-size

测试代码为:

<div style="width:750;height:1334;background: url(/bg.png);background-size:cover;">
</div>

显示效果如下：

可以看到这个样式并不起作用。我们在调试器中看看代码：

可以看到并没有生成相关的代码。

4.测试background-position

测试代码

<div style="width:750;height:1334;background: url('/bg.png');background-position:top top;">
 </div>

效果如图：

5.总结

经测试weex的text，div,input均支持background：url写法，其他的background-*均不支持。

Paste_Image.png

---

解决上面demo中的图片重复问题，可以在index.html中添加

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

就可以了。