Question

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

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

以下是我的CSS和HTML（index）代码：

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

Answer 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

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

1 个答案: