Html 在ASP.NET中添加背景图像以覆盖整个屏幕_Html_Css_Asp.net_Razor_Razor Pages

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

html css asp.net razor

Html 在ASP.NET中添加背景图像以覆盖整个屏幕,html,css,asp.net,razor,razor-pages,Html,Css,Asp.net,Razor,Razor Pages,我正在ASP.NET中使用Razor页面，并尝试添加背景图像，同时在背景图像上维护我的文本和图片。我正在添加标记，而不是标记。我以前的实现没有覆盖该页面，只是其中的一部分我认为最好的做法是像我上面所说的那样将背景图像添加到html标记中，但我不确定要在html代码中写入什么下面是我的CSS和HTML（索引）代码： <style type ="text/css" > html { background-image: url('~/data/backgr

我正在ASP.NET中使用Razor页面，并尝试添加背景图像，同时在背景图像上维护我的文本和图片。我正在添加

标记，而不是

标记。我以前的实现没有覆盖该页面，只是其中的一部分

我认为最好的做法是像我上面所说的那样将背景图像添加到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;
}


html{
背景图像：url（'~/data/backgroundimage.jpg'）；
背景重复：无重复；
最小高度：100%；
}
.淡入{
动画：fadeIn ease 5s；
-webkit动画：fadeIn ease 5s；
-moz动画：fadeIn ease 5s；
-o-动画：fadeIn ease 5s；
}

@page
@{
ViewData[“Title”]=“模拟网站！”；
}
你好
我能为您效劳吗？

您需要将

用于：

封面

：

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

另请参见：

我尝试了您建议的解决方案，但没有为网站背景添加任何内容。我还在链接的第一个答案中分别添加了HTML部分和您的解决方案。您能否验证页面上是否加载了css，body元素是否有css？body元素没有css，但是header有。我的css引用应该在中而不是中吗？我还通过将路径的开头从~改为..在你的链接中得到了html答案。我的意思是当你打开页面时，你能看到你的css被加载了吗？我怀疑你的css路径不正确。您还应该将

type=“text/css”

删除

媒体

属性添加为

（可以将css引用放在标题btw中）好的，我按照您的建议做了。是的，我的css已加载，我的.fade-in正在工作。

@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>

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