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用这个

最后更新于