关于background设置的问题

来源：互联网发布：数据分析师薪水杭州编辑：程序博客网时间：2024/05/22 01:43

最近在写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具有高优先级。使用时要注意先后顺序。

0 0