weex布局（2）之background

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

---

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

---

1.测试background:color

测试代码为：

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

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

2.测试background：url()

测试代码为：

显示效果为：

上图中图片重复了。

3.测试background-size

测试代码为:

显示效果如下：

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

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

4.测试background-position

测试代码

效果如图：

5.总结

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

Paste_Image.png

---

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

就可以了。