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
等等会失效呢？
hanjian
9 years, 6 months ago
Answers
我来说一下原因吧
第一种情况
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优先级问题+复合属性问题
雪风KYO
answered 9 years, 6 months ago
