单独设置background-xxx比如(background-position)失效原因及解决方法

                如何解决单独设置background-xxx属性失效问题

background属性是一个使用很广泛的属性,所有主要浏览器都支持这一属性,平日里我们也常用background:

#FF0000 url('../xx.jpg') top left no-repeat;  这一缩写属性的方法。

正文

今天在写一个轮播图背景图的时候碰到这样一个问题:我单独设置了background-position和background-size

等属性,接着我还写了background:url()设置背景图片,结果前面单个属性全部失效

html结构如下

本意是想通过.pc_a{} 设置图片的位置等属性,通过.pc_1{},.pc_2{}引入a标签的背景图片

但是却在浏览器得到这样的结果:

扫描二维码关注公众号,回复: 2277885 查看本文章

是的,我设置的background-xxx的属性全部失效了

按照经验,下划线划掉的属性表示我前面可能写了相同属性将其覆盖,乍一看没有

想着浏览器渲染是从上往下的,我便把.pc_a{...}一起放到.pc_1{}.和pc_2{}下面,

于是乎现在样式结构变成这样,保存,按f5刷新属性一看,果然生效了,页面达到我要的效果

这样问题就得到解决了,不过我还是想知道原因到底是什么,导致我写单个写的background属性失效呢

定睛在一块看,原来我在设置了background-xxx属性之后,还设置了background属性,这一属性本来就

有多个属性,会不会就是它默认值把我前面设置的给覆盖了呢

证明

我将几个样式顺序复位,然后将background属性改为background-image,果然属性依旧生效,页面达到

我想要的效果

总结

background属性等有多个属性值的,要么统一书写单个属性比如background-position,background-size

background-image等,避免background属性默认值覆盖单个属性值

要么你就先写background属性,再写background-xxx属性,因为样式解析是从上到下的,所以不会出现覆盖

猜你喜欢

转载自blog.csdn.net/A_pig_like_sleeping/article/details/81134209