如何修改Bootstrap容器背景？EJS登录项目样式失效求助

问题根源 #

你遇到的问题源于两点：

1. Bootstrap的.container类默认自带白色背景（background-color: #fff），直接覆盖了从<html>标签继承的红色背景
2. 容器内的文本、表单元素被Bootstrap默认样式（如body文本色、输入框样式）覆盖，你的CSS选择器优先级不足以替换这些样式

修改方案 #

方案一：增强主题样式的穿透性

直接修改style.css，让主题样式覆盖容器及内部所有元素：

/* 覆盖html、容器及内部所有元素的基础样式 */
[theme="bloodRed"],
[theme="bloodRed"] .container,
[theme="bloodRed"] .container * {
    background-color: #ff2424;
    color: #e571e1;
}

/* 单独调整表单输入框，避免背景色与输入内容混淆 */
[theme="bloodRed"] .form-control {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #e571e1;
}

/* 调整输入框占位符颜色，提升可读性 */
[theme="bloodRed"] .form-control::placeholder {
    color: rgba(229, 113, 225, 0.7);
}

方案二：模块化主题类（更推荐）

这种方式更灵活，方便后续扩展或切换主题：

1. 修改style.css定义独立主题类：

.theme-bloodRed {
    background-color: #ff2424;
    color: #e571e1;
}

.theme-bloodRed .form-control {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #e571e1;
    color: #e571e1;
}

.theme-bloodRed .form-control::placeholder {
    color: rgba(229, 113, 225, 0.7);
}

2. 在register.ejs中给容器添加主题类：

<div class="container theme-bloodRed">

额外说明 #

如果需要保留<html>上的theme属性做其他逻辑，可以结合属性选择器和类选择器，比如：

[theme="bloodRed"] .theme-bloodRed {
    /* 补充特定场景样式 */
}

这样既保留属性标记，又能通过类精准控制样式。

内容的提问来源于stack exchange，提问作者Shan