Question

我有3个选择加入页面用于单独的活动。每个人都需要不同的背景。我正在使用blazor c＃所以我有一个主要的site.css文件，其中包含正文，然后其余的页面像组件一样呈现。

因此，如果我将CSS body设置为具有背景，它显然会填满整个页面。但是，如何将div封装在cshtml中并使其填满整个屏幕？这就是我所拥有的，而且它无法正常工作：

body {
    background-color: #202020;
    background-repeat: no-repeat;
    background-size: cover;
}
#pagewrapperevent1 {
    background-image: url('http://i.e.eastbay.com/wpm/100233/WebForms/EB_Event_Signup_1/FL_form-engraved_background.jpg '); 
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0;
}
#pagewrapperevent2 {
    background-image: url('http://www.lyhyxx.com/data/out/38/4085425-athletics-wallpapers.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0;
}

请注意，所有这三个元素都位于不同的.cshtml文件中。每个元素都是div，其中包含我的所有内容。

这是我的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>EastbayEvents</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>

    <script type="blazor-boot"></script>
</body>
</html>

page1.cshtml

<div id="pagewrapperevent1">
//removed for brevity
</div>

获取div以填充整个页面以获取单独的背景图像

0 个答案: