理論
- background可以設置圖片，背景圖拉伸、背景圖大小、背景圖相對位置、背景顏色等
- 而background-color只能設置背景色
驗證
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
background: url("./1.png")
}
/* 使用background */
a:hover {
background: blue;
}
/* 使用background-color */
a:hover {
background-color: blue;
}
</style>
</head>
<body>
<a href="#">馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥馮天祥</a>
</body>
</html>
以上代碼的目的是，當鼠標停留在a文字上時，用藍色替換紅色背景圖片，運行效果如下
使用background，生效
使用background-color，不生效
結論
background-color改變的只是背景色，而不是背景圖，效果是有的，只是圖片把背景色遮住了看不到，所以建議改變背景顏色時，儘可能使用background