英文:
How do I change the background on a bootstrap container
问题
以下是代码部分的翻译：
[theme="bloodRed"] {
background-color: #ff2424;
color: #e571e1;
accent-color: #00ff00;
}
<!DOCTYPE html>
<html lang="en" theme="bloodRed">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign up</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="/css/style.css" rel="stylesheet">
<link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
</head>
<body>
<div class="container">
<div class="login-box">
<div class="row">
<div class="col-md-6">
<h2>Sign up</h2>
<form action="register" method="post">
<div class="form-group">
<label>First and Last name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-outline-info" style="margin-top: 10px;"> Sign up </button>
</form>
<p style="margin-top: 15px;">Already have an account?   <a class="btn btn-outline-success" href="login">Login here!</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
const express = require("express");
const app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");
请注意，这只是对代码部分的翻译，没有包括问题的回答。
英文:
So I'm making a ejs login project, style.css:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
[theme="bloodRed"] {
background-color: #ff2424;
color: #e571e1;
accent-color: #00ff00;
}
<!-- end snippet -->
register.ejs:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" theme="bloodRed">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign up</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="/css/style.css" rel="stylesheet">
<link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
</head>
<body>
<div class="container">
<div class="login-box">
<div class="row">
<div class="col-md-6">
<h2>Sign up</h2>
<form action="register" method="post">
<div class="form-group">
<label>First and Last name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-outline-info" style="margin-top: 10px;"> Sign up </button>
</form>
<p style="margin-top: 15px;">Already have an account?   <a class="btn btn-outline-success" href="login">Login here!</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
and then this js code connects them:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const express = require("express");
const app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");
<!-- end snippet -->
but in register.ejs, the text doesnt change, neither does the background, if you go outside the div its red, help?
答案1
得分: 0
CSS遵循特异性和级联规则。您将theme属性添加到html元素中，但Bootstrap CSS（在重置中）会覆盖它，因为它在body上应用了白色的背景颜色和文本颜色#212529;。
将您的theme属性添加到body标签会有所帮助，但还有许多其他地方会应用文本或背景颜色。最好使用Bootstrap SASS模块和/或自定义属性（CSS变量）。关于自定义的文档部分详细介绍了如何操作。
英文:
CSS follows rules of specificity and cascade. You're adding your theme property to the html element, but the Bootstrap CSS (in the reboot) is overriding it because it's applying a background-color of white on the body and a text color of #212529;.
Adding your theme property to the body tag, will help, but there are lots of other places that will apply text or background colors. It's better to use the Bootstrap SASS modules and/or custom properties (CSS variables). The documentation section on Customization details how.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论