在 ASP.NET 中添加背景图像以覆盖整个屏幕答案

【问题标题】：Adding a background image in ASP.NET to cover entire screen在 ASP.NET 中添加背景图像以覆盖整个屏幕
【发布时间】：2021-02-12 15:05:50
【问题描述】：

我在 ASP.NET 中使用 Razor Pages 并尝试添加背景图像，同时在背景图像上保留我的文本和图片。我添加了<html> 标签而不是<body> 标签。我之前的实现并没有覆盖页面，只是其中的一部分。

我认为最好的做法是如上所述将背景图像添加到 html 标记中，但我不确定要在 html 代码中写入什么。

下面是我的 CSS 和 HTML（索引）代码：

<style type ="text/css" >

html {
    background-image: url('~/data/backgroundimage.jpg');
    background-repeat: no-repeat;
    min-height: 100%;
}


.fade-in {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
}

@page
@{
    ViewData["Title"] = "Mock Website!";
}
<html>

<head>
    <link href="~/css/website.css" rel="stylesheet" media="screen" />
</head>

<body>

    <div class="text-center">
        <img src="~/data/icon.png" />
        <h1 class="display-4">Hello!</h1>
        <div class="fade-in">
            <h2 class="display-4">How can I help you?</h2>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css asp.net razor razor-pages

【解决方案1】：

您需要将<body> 与background-size 一起使用：

cover:

在不拉伸图像的情况下尽可能大地缩放图像图片。如果图像的比例与元素不同，则为垂直或水平裁剪，以便没有空白空间仍然存在。

body { 
    background-image: url(~/data/backgroundimage.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
}

另见：How to apply full background image in asp.net MVC

【讨论】：

我尝试了您建议的解决方案，但没有在网站背景中添加任何内容。我还在链接的第一个答案中添加了 HTML 部分，并分别添加了您的解决方案。
你能验证你的页面上加载了css并且body元素有css吗？
body 元素没有 css，但 header 有。我的 css 引用应该在而不是
中吗？通过将路径的开头从 ~ 更改为 ..
，我还得到了链接中的 html 答案。
我的意思是当你打开页面时，你能看到你的css被加载了吗？我怀疑你的css路径不正确。而且您还应该添加type="text/css" remove media 属性为<link href="../css/website.css" rel="stylesheet" type="text/css"/> （顺便说一句，将css引用放在标题中应该没问题）
好吧，我按照你的建议做了。是的，我的 css 已加载，我的 .fade-in 正在工作。