使用color属性设置文字颜色，支持颜色名、十六进制、RGB、RGBA；2. 用background-color设置背景色；3. background-image添加背景图，配合repeat、position、size、attachment控制显示；4. background简写属性整合背景样式。示例展示了文本与背景的常用配置，强调可读性与视觉协调。
设置文字颜色和背景是CSS中最基础也是最常用的样式操作。通过几个关键属性，可以轻松控制网页中文本的前景色（即文字颜色）和元素的背景效果。
1. 设置文字颜色（color）
使用 color 属性来定义文本的颜色。颜色值可以用多种方式表示：
颜色名称：如 red、blue、green、black、white 等十六进制值：如 #ff0000（红色）、#000000（黑色）、#ffffff（白色）RGB值：如 rgb(255, 0, 0)、rgb(0, 0, 0)RGBA值（支持透明度）：如 rgba(255, 0, 0, 0.5)
示例：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
p { color: #333; /* 深灰色文字 */}h1 { color: rgb(255, 102, 0); /* 橙色文字 */}
2. 设置背景颜色（background-color）
使用 background-color 属性为元素设置背景色。语法与 color 类似，支持相同类型的颜色值。
立即学习“前端免费学习笔记（深入）”；
默认情况下，背景颜色是透明的（transparent），你可以覆盖它。
示例：
div { background-color: #f0f0f0; /* 浅灰色背景 */}header { background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */}
3. 设置背景图片（background-image）
除了纯色背景，还可以用图片作为背景。使用 background-image 属性，并配合其他子属性控制显示效果。
background-image：指定图片路径，如 url('bg.jpg')background-repeat：控制图片是否平铺，常用值有 repeat、no-repeat、repeat-x、repeat-ybackground-position：设置图片位置，如 center、top left、50% 50%background-size：设置图片大小，如 cover（充满容器）、contain（完整显示）、或具体尺寸如 100px 200pxbackground-attachment：控制背景是否随内容滚动，如 scroll 或 fixed
示例：
section { background-image: url('pattern.png'); background-repeat: no-repeat; background-position: center; background-size: cover;}
4. 简写背景属性（background）
可以使用 background 简写属性一次性设置多个背景相关属性，顺序通常为：
background: [color] [image] [repeat] [position] [size] [attachment];
示例：
div { background: #fff url('bg.jpg') no-repeat center/cover fixed;}
这个例子设置了白色背景色、居中不重复的背景图、大小为cover，并固定不随页面滚动。
基本上就这些。掌握 color 和 background 相关属性，就能灵活控制网页中文本和背景的视觉效果。注意在设计时考虑可读性，比如浅色背景配深色文字，避免颜色冲突。
以上就是css常用属性如何设置文字颜色和背景的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1011954.html
微信扫一扫 
支付宝扫一扫 
