最近在写css的时候遇到了一些关于background设置的问题。当一个div中要设置背景图和背景色的时候,某些时候背景色会覆盖掉背景图。
<div class="bg_color">
<div class="txt">
测试占位
</div>
</div>
情况1:背景色和背景图片都设在background里面。背景色和背景图片的都存在。调换背景色和背景图的顺序也都显示了。
.bg_color{background:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px red;}
.txt{height:60px;width:100%;}
情况2:背景图片设在background-image中,背景色设在background中,背景色覆盖了背景图
.bg_color{background-image:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px;background:red;}
.txt{height:60px;width:100%;}
情况3:设置和情况2相同,只是顺序反了一下,背景色覆盖了背景图
.bg_color{background:red;background-image:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px;}
.txt{height:60px;width:100%;}
情况4:背景图放在background中,背景色放在background-color中,背景色和背景图片都显示出来了。
.bg_color{background:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px;background-color:red;}
.txt{height:60px;width:100%;}
情况5:设置和情况4相同,只是顺序反了一下。只显示了背景图,没有显示背景色
.bg_color{background-color:red;background:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px;}
.txt{height:60px;width:100%;}
情况6:设置了background-image和background-color,背景色覆盖了背景图。
.bg_color{background-image:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px;background-color:red;}
.txt{height:60px;width:100%;}
情况7:设置和情况6相同,只是顺序反了一下。背景色覆盖了背景图。
.bg_color{background-color:red;background-image:url(../images/test_pic/top_nav.jpg) no-repeat 10px 0px;}
.txt{height:60px;width:100%;}
总结:background具有高优先级,background-color比background-image具有高优先级。使用时要注意先后顺序。