CSS 背景问题

Question

一：

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 等等会失效呢？

Answer 1

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

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

Answer 2

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

    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优先级问题+复合属性问题

Answer 3

• 
  
  • 竟然没想到。谢谢哈