css里background-no-repeat不生效
前两天一个同事遇到这样一个问题
我觉得挺好玩
今天给大家还原一下现场哈
首先呢这有一个 div
然后呢他设置了两个样式
一个背景图片
一个 no-repeat
这两个样式也都很简单
就是一个 no-repeat 和一张背景图片
他遇到的问题是
这个背景图片的 no-repeat
怎么也不生效
我们来看一下最终生成的样式里面哈
他就没有 background-repeat 的这个属性
大家看!这个border加上了
说明这个样式整个是应用上的
但为什么他就没有生效呢
而且下面也没有重名的样式
(因为现在这是用的wx开发者工具嘛)
后来我们就用纯html写了个demo
同样的代码也有问题
但是,我们发现他在 chrome 的这个调试里面
能找到这个属性
大家看 no-repeat 在下面!
他被...禁用上了
被谁覆盖掉了呢?就被这个.bg
他这个 .bg 虽然只写了background: url(...)
但是展开以后这里边有很多选项
也就是说:整个这个background
如果你只写一个 url
其他的这些属性都是按默认来的
比如说这个repeat
所以解决方法就很简单
我们要么在这加一个background-image
大家看!这样他就只针对 background-image 设置了
或者我们在这写background
然后呢后边加一个
no-repeat
大家看!如果你不加 no-repeat
那他默认就是是重复的
而且会覆盖你上面的写的
或者你把它放下面
也是可以的
大家看!这就没问题
我们把它放上面
就有问题
这个问题虽然是小问题
但是,我们通过这个小问题
明白了一点:
就是:有时候 通过这个WX开发者工具
我们可以写个小demo用这个
最后更新于
这有帮助吗?