background与background-color 你“不知道”的区别

background与background-color的区别

有时候你是不是会有疑问，当你在ul >li>a中把a设置成了display：block 开始时用background设置了背景图片，但你在接下来的时候给他是指 a:link,a:visited时想要给他添加背景色!如果你还是用了“background”这回问题出现了？那么接下来讲解如何处理这个问题，并解决问题的根源。

一、首先讲一下background和background-color的区别和用法

1.background： background可以添加背景色color，添加图片url，调整平铺状态repeat，还可以调整图片的位置 第一个是 left和right 第二个值是topbottom。
2.background-color： background-color只能调整背景颜色

讲完了background和background-color的用法

二、出现的问题，和解决方法

这是刚插入background：url；

这是a:link,a:visited 使用background：color
问题： 当你同一个标记首先设置了的background：url 那么在接下来在使用一个background：#ffff00 就会覆盖上面设置的背景只显示下面的背景
例子：

< ul>
 < li>
 < a>
 测试background
 < /a>
 < /li>
 < /ul>

< style>
ul{
width:158px;

}
a{
display:block;
background:url(你所插入的图片);
}
a:link a:visited{
background: #ffff00;
}
< /style>
这时只会显示背景黄色
解决方法 在后面把background换成background-color就能解决这个问题

这是在a:link,a:visited中使用background-color解决了问题
a:link,a:visited{
background-color: #ffff00;
}
第二种解决方法：可以直接用background把背景颜色与背景图片写到一起
方法如下：background：color url（img） repeat left bottom;

！！此时既能显示出黄色也能显示出背景
！！注意所写例子与代码不同，例子仅供参考