CSS:background属性冲突导致的部分浏览器背景图片不显示问题

background: url(../images/detail_middle.png) top repeat-y;
background-size: 100%;

背景占满屏幕，垂直方向repeat 在我看来属性没什么问题 为什么图片就是不显示呢？ 图片放在其他元素上可以显示，浏览器已经禁止了缓存，检查没有冲突属性，background-color可以正常生效;

在将background-size:100%改为contain后，问题解决了。

愉快地更新代码，并且测试通过后，我开始考虑引发问题的原因。 现在我并不知道为什么这么改就没有问题了。

首先区分一下background-size:100%,contain和cover这三者间的区别：

cover:图片填满整个容器，不变形；

contain:图片在不超出容器的情况下放大到最大，不变形；

100%:图片宽高设为容器的宽高的100%，可能会变形。

在我看来，在这个场景中，contain和100%的效果应该是一样的，但是问题出在100%上。

background-size是CSS3新增的属性，除了提供的cover和contain两个属性值外，还可以通过传递两个参数 随意设置宽度和高度，当只传递一个参数的时候，第二个参数为默认值，即auto。

而我想当然地以为background-size:100% 就等同于 background-size:100% 100% 了。

后来我又试了下，写成 background-size:100% 100%确实也是没问题的，而且如果这样写也就不再需要repeat-y了。

所以，问题就出在这里，在将background-size的纵坐标值设为auto的同时，将background-repeat设为repeat-y， 在UC浏览器中会出现背景图片无法显示的情况（大部分浏览器中还是不会有这种问题的），而造成这个问题的原因我就不再追查了，也许这种写法本身就并不规范，UC在处理这种代码的时候兼容性并没有考虑到。以后还是不要出现这种写法就好。

总结：

1，UC浏览器中background-repeat的repeat属性不要与background-size的auto属性同时运用，可能会无法显示背景图案；

2，background-size只传一个值时，另一个值为默认的auto，并不像background-position等属性一样一个值可以当两个值用；

3，如果只是记录解决方法的话只要上两条总结就够了，这篇随笔更主要的是记录了我解决并理解问题的思路和过程，希望能对以后的我或者更多的小伙伴们起到帮助的作用。