背景图片通过CSS在ASP.NET Core 5.0



我有一个问题,我需要通过css文件在Razor模板中设置不同元素的背景图像,项目的结构是:

项目结构我想添加一个图像到类"搜索"在该文件中,代码位于

下面
<!DOCTYPE html>
<html>
<head>
<title>Интернет-магазин RTX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="~/js/script.js"></script>
<link rel="stylesheet" href="~/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">КОРЗИНА</a></li>
<li><a href="#">ВОЙТИ</a></li>
<li><a href="#">РЕГИСТРАЦИЯ</a></li>
</ul>
<a href="#" id="pull">МЕНЮ</a>
</nav>
</div>
<div>
<div class='outer_search'></div>
<div class='search_div'>
<form id='search' action="">
<input id='searchline' type="search" placeholder="Поиск товара...">
<i class="fa fa-search"></i>
</form>
</div>
</div>
@RenderBody()
<script src="~/js/select_menu.js"></script>
</body>
</html>

我得到的问题,图像是不可见的现场,但从我的模型的图像显示正确(图像在其他文件从renderbody()),所以我怎么能解决这个问题?Css文件:

.outer_search {
position: absolute;
height: 300px;
width: 100%;
background: url('../images/main.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}

此外,我可以说所有的样式都工作正常

您可以添加图像的方式是设置路径为(/images/image.png)而不是(../image/image.png)。虽然浏览器中的路径将像下面这样显示,但它会工作。图片

最新更新