CSS 背景问题

一:

HTML部分

<div class="article-top"></div>

CSS部分

.article-top {
    background: url("img/3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

二:

HTML部分

<div class="article-top" style="background: url('img/3.jpg');"></div>

CSS部分

.article-top {
    /*background: url("img/3.jpg");*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

为什么第二种情况把 background-image 放到 div 里面后 background-repeat background-position background-size 等等会失效呢?

已邀请:

我来说一下原因吧
第一种情况

    background: url("img/3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

能使你的页面呈现想要的效果 是因为 background-repeat background-position background-size这些属性 覆盖了background: url("img/3.jpg");默认的 repeat position 等等属性

第二种情况是因为 按照优先级问题 dom style>css文件 所以 你设置在css中的那些都不起作用

设置成background-image: url('img/3.jpg'); 后 css中的那些 属性就起作用了

知识点:css优先级问题+复合属性问题

jingxing231

赞同来自: lisilzb hh337 sxzhustar bb32601229 royt123

第二部分的style应该使用 background-image 属性。

<div class="article-top" style="background-image: url('img/3.jpg');"></div>

gwolf

赞同来自:

我也想知道原因

要回复问题请先登录注册