直接用内联style="background-color: #f0f0f0;"即可，bgcolor属性在html5中已被移除，对等标准元素无效；需配合padding避免背景紧贴文字，多段落建议抽离为css类统一管理。
直接给段落元素加 style="background-color: #f0f0f0;" 就行，不需要 JS、不用外部 CSS，也不用碰已废弃的 bgcolor 属性。
为什么 bgcolor 在 <p></p> 上根本不起作用
很多人试过写 <p bgcolor="#ffeb3b">文字</p>，结果背景色没变——不是你拼错了，是浏览器压根不处理这个属性。bgcolor 早在 HTML5 就被移除，只在 <table>、<code><td> 等极少数老标签上还有残余兼容，对 <code><p></p> 这类标准块级元素完全无效。W3C 验证器会报错，VS Code 也会标黄警告。
background-color 写在哪？内联样式最稳妥
给段落设背景色，最直接、优先级最高、调试最省心的方式就是内联 style：
<p style="background-color: #e3f2fd; padding: 8px 12px;">这段文字有浅蓝底色</p>
注意两点：
-
background-color必须写全，不能简写成background: #eee——否则可能意外清掉已有background-image或background-repeat - 加
padding是为了让颜色“包住文字”，否则背景紧贴文字边缘，视觉上像没生效 - 别用
rgba(0,0,0,0.1)直接套在<p></p>上——如果父容器没设背景，你会看到底下滚动条或 body 颜色透上来，误以为“背景没加进去”
多个段落要统一背景？别重复写 style
如果你有 5 个 <p></p> 都要同一种背景，硬写 5 次内联样式等于埋下维护雷。这时该抽成 CSS 类：
<style>
.bg-lightblue { background-color: #e3f2fd; padding: 8px 12px; }
</style><p class="bg-lightblue">第一段</p>
<p class="bg-lightblue">第二段</p>
好处很明显：
- 改颜色只需动一处，不用满页搜
style= - 可配合
@media (prefers-color-scheme: dark)做深色模式适配 - 避免因复制粘贴漏掉某个
padding导致高度不一致
背景色“看不见”？先检查这三件事
写了 background-color 却没效果，大概率不是语法错，而是布局层面的问题：
-
<p></p>是空标签，比如<p></p>—— 没内容就没高度，背景自然不可见 - 父容器用了
overflow: hidden或transform，把<p></p>的背景裁掉了（尤其加了border-radius又没留足够padding） - CSS 框架（如 Bootstrap）重置了
p的默认 margin 和 padding，导致背景区域被压缩到一条细线，肉眼难辨
调试时最简单的方法：临时换成 background-color: red !important;，再看是不是真没渲染，还是只是太淡/太小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
