Question

我已经建立了一个工作网站，它处于起步阶段，我还在学习.NET Core / MVC。

我已经尝试了一切来移除空白区域并让我的背景覆盖整个页面。显然我只为我所拥有的选择加入组件设置了样式，但我看不到main.css所有我看到的是vendor.css，即使我进去并将css更改为

background: url(images/bg.jpg) no-repeat center center fixed; 
background-size: cover;

白色空间保持不变，

我已经使用调试控制台检查了元素，我可以看到我的组件实际上并没有覆盖整个页面，但我在代码中的任何地方找不到实际的元素， http://my.jetscreenshot.com/demo/20180517-ahau-195kb

这是我的git项目https://github.com/InnovationGB/EventOptIn

我假设它已被编译，而且实际上并不在我的代码中，

编辑：

我对_layout.cshtml进行了此更改

 <base href="~/" />
    <style>
        html {
            background: url('http://i.e.eastbay.com/wpm/100233/WebForms/EB_Event_Signup_1/FL_form-engraved_background.jpg') no-repeat center center fixed;
        }
    </style>
    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />

这有以下结果，我无法确定填充发生的位置.... http://my.jetscreenshot.com/demo/20180517-mj1p-120kb

Answer 1

确定，所以你有那些白条的原因确实是自助。即container-fluid类：

padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;

所以，进入你的app.component.html并为该div添加一个合适的id：

<div class='container-fluid' id="wrapper">
    <div class='row'>
        <div class='col-sm-12 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

将规则添加到add.component.css

#wrapper, .body-content {
    padding:0;
}

摆脱底部的白条就像从

中删除margin-bottom: 20px;一样简单

<div class="overlay_header" style="text-align: center; margin-bottom: 20px;">
                <h1 class="overlay_header_heading"><!–– Thanks For Signing Up!--></h1>

                <p style="color: #ffffff;"><a href="https://www.eastbay.com/customerserv/help:privacyPolicy/" target="_blank" title="View our Privacy Policy" style="color: #ffffff;">Privacy&nbsp;Policy</a> and <a href="https://www.eastbay.com/customerserv/help:terms/" target="_blank" title="View our Terms of Use" style="color: #ffffff;">Terms&nbsp;of&nbsp;Use</a></p>
</div>

如果您仍然启用了HMR，则应立即在浏览器中显示更改。

默认的css编辑？

1 个答案: