如何更改 body 的背景颜色？

Question

如何更改主布局中的背景颜色，它现在是深色的我用导航栏找不到它我需要更改 body 我找不到它它在 bootstrap 文件中吗？

还有如何更改文本字段的大小和颜色？

这是布局代码：

<!DOCTYPE html>
<html>
<head>
    <title> store system  </title>
    @RenderSection("head", required: false)

    <meta charset="utf-8">
    <title></title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Nunito:wght@600;700;800&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href=@Url.Content("/Contents/lib/animate/animate.min.css") rel="stylesheet">
    <link href=@Url.Content("/Contents/lib/owlcarousel/assets/owl.carousel.min.css") rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href=@Url.Content("/Contents/css/bootstrap.min.css") rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href=@Url.Content("/Contents/css/style.css") rel="stylesheet">
</head>
<body style="background-color:darkgray ">
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->
    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg bg-white navbar-light shadow sticky-top p-0">
        <a href="#" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
            <h2 class="m-0 text-primary"><i class="fa fa-book me-3"></i>Store System</h2>
        </a>
        <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto p-4 p-lg-0">
                <a href="index.html" class="nav-item nav-link active">Home</a>
                <a href="about.html" class="nav-item nav-link">About</a>

                <a href="@Url.Action("Index", "Quantities")" class="nav-item nav-link">Quantity</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Setup</a>
                    <div class="dropdown-menu fade-down m-0">
                        <a href="team.html" class="dropdown-item">Our Team</a>
                        <a href="testimonial.html" class="dropdown-item">Testimonial</a>
                        <a href="404.html" class="dropdown-item">404 Page</a>
                    </div>
                </div>
                <a href="contact.html" class="nav-item nav-link">Contact</a>
            </div>
            <a href="" class="btn btn-primary py-4 px-lg-5 d-none d-lg-block">Join Now<i class="fa fa-arrow-right ms-3"></i></a>
        </div>
    </nav>
    <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src=@Url.Content("/Contents/lib/wow/wow.min.js")></script>
    <script src=@Url.Content("/Contents/lib/easing/easing.min.js")></script>
    <script src=@Url.Content("/Contents/lib/waypoints/waypoints.min.js")></script>
    <script src=@Url.Content("/Contents/lib/owlcarousel/owl.carousel.min.js")></script>

    <!-- Template Javascript -->
    <script src=@Url.Content("/Contents/js/main.js")></script>
    @RenderBody()
</body>
</html>

请看图:

enter image description here

这是查看代码：

@model warehouse.Models.ITEMS_STOCK

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>ITEMS_STOCK</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.BATCH_NO, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BATCH_NO, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BATCH_NO, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PROD_DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PROD_DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PROD_DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EXPIRY_DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EXPIRY_DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EXPIRY_DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.QUANTITY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.QUANTITY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.QUANTITY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.RECEIVEDBY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.RECEIVEDBY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.RECEIVEDBY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SENDBY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SENDBY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SENDBY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SUPPLYERID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SUPPLYERID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SUPPLYERID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SUPPLYID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SUPPLYID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SUPPLYID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DATE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.USER_ID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.USER_ID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.USER_ID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.item_code_id, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.item_code_id, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.item_code_id, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

更新：

我运行视图然后 select 检查和 select body style.css body 部分中有一行 :

/* 背景：linear-gradient(#141e30, #243b55);

我在文件 style.css 中更改了它，但总是在检查中显示这一行并且没有更改？我可以保存检查中的更改吗？为什么不阅读 style.css 的变化？

我从它的阅读位置检查了来源并更改了它，但它总是如此相同的颜色看到图像请查看它的来源 style.css 第 443 行我将其删除并保存，但是运行视图仍然存在 !!

enter image description here

Answer 1

尝试强制着色：

body{background-color:red !important;}

最好直接在html，这样优先级最高：

...
<body style="background-color:red !important;">
...

Answer 2

1- 尝试复制文件 style.css

2- 粘贴然后更改颜色

<body style="background-color:red;">

3- 从新文件读取 style1.css

 <!-- Template Stylesheet -->
 <link href=@Url.Content("/Contents/css/style1.css") rel="stylesheet">

4- 构建解决方案。

如何更改 body 的背景颜色？

how to change background color for the body?

c#

asp.net-mvc