color/background-color、img/background-image、background-color/opacity有什么区别？

1. color 和 background-color

color：用来设置文字颜色。

background-color：用来设置背景颜色。

注：CSS中，color属性有多种写法，

1）直接写颜色名，例如pink、blue、white。

2）十六进制写法，使用 #RRGGBB或#RGB格式，其中RR、GG、BB分别代表红色、绿色和蓝色的十六进制值。例如，#FFFFFF代表白色，#000000代表黑色。

3）RGB颜色写法，使用rgb(R, G, B)格式，其中R、G、B分别代表红色、绿色和蓝色的数值，取值范围为0-255的整数或0%-100%的百分比。例如，rgb(255, 0, 0)代表红色，rgb(0%, 100%, 0%)也代表绿色。RGB颜色表示法提供了很大的灵活性，允许用户通过组合红绿蓝三原色的不同强度来创建几乎任何颜色‌。

4）RGBA写法，RGBA是RGB颜色的扩展，增加了透明度A（Alpha）通道，允许设置颜色的透明度。取值范围0~1，其中0代表完全透明，1代表完全不透明。

5）HSL写法，HSL则是一种基于色相、饱和度和亮度来表示颜色的方法，提供了另一种创建和调整颜色的方式。HSL的色相值范围为0-360，饱和度和亮度为0%-100%。这些扩展的颜色表示法提供了更多的控制和灵活性，尤其是在需要精细调整颜色时‌。

6）HSLA写法，HSLA是HSL颜色的扩展，也是增加了透明度A，取值范围0~1。

7）英文单词表示颜色，例如transparent 透明色，但并非所有颜色都有对应的英文单词，因此其使用受到一定限制‌。

2. img 和 background-image

img：HTML结构，元素单标签，用于引入图片，属于块级元素。

注：

1）img是html中的标签，单标签；

image属于服务器控件，双标签，一般用于uniapp开发，因为uniapp开发中不能识别img标签！！

2）img标签不设置 width 和 height 的大小，默认显示图片的真实大小；

只设置 width 或 height 其中的一个，另一个会按比例自动缩放；

设置 width 和 height，指定图片的大小。

background-image：CSS样式，用来设置块级元素的背景图片。

总结：

1）img 不需要设置宽高，可以直接显示出来，因为它本身就是块级元素；

background-image必须设置宽高（借助块级元素）才能显示，因为背景图撑不开容器。

2）img不可以在图片上写字，字会显示在盒子外部，显示不了内容，除非定位（例如绝对定位）；

background-image可以在图片上写字，字在图片上面。

3）实际应用中，img标签一般用来做产品图片显示，需要经常更新；

background-image一般用来做背景，或者一些很少更新的小icon。

4）img标签会先于background-image加载，因为浏览器先加载html结构，再加载css样式。

img加载失败会有痕迹，但是background-image不会。

3. background-color 和 opacity

background-color：可以设置背景透明度，只对背景有用，内容不变化。

opacity：可以设置背景透明度，背景和内容会一起变化。

4. background-color 、background-image和 background

background-color：后面只能跟color这一个属性。

background-image：后面只能跟背景图像这一个属性，可以设置一个或多个背景图像。

注：background-color 和 background-image 不能直接撑开div盒子的高度，
因为它们只是CSS属性，不是块元素的内容，无法直接撑开盒子高度。

background：CSS简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。后面可以跟一个或多个属性。

注： 引入图片后，

如果是小盒子，图片容易超出范围，可以将图片的宽高设置为100%（和父盒子一样），前提是父盒子宽高都有；

如果是大盒子，例如body，图片容易铺不满，可以设置background-sie:cover铺满，前提是大盒子的宽高都有 。