Asp.net mvc 使用MVC向bootstrap 4 jumbotron动态添加css背景图像_Asp.net Mvc_Twitter Bootstrap

Asp.net mvc 使用MVC向bootstrap 4 jumbotron动态添加css背景图像

asp.net-mvc twitter-bootstrap

Asp.net mvc 使用MVC向bootstrap 4 jumbotron动态添加css背景图像,asp.net-mvc,twitter-bootstrap,Asp.net Mvc,Twitter Bootstrap,我正试图根据我的视图内容动态更改jumbotron上的背景图像，但我不确定如何做到这一点。到目前为止，我的代码将图像作为一个单独的元素粘贴在jumbotron中，但正如我所说，我真的希望这是背景图像，这样它的缩放效果会更好，并且我可以对图像进行中央验证 <div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;"> <im

我正试图根据我的视图内容动态更改jumbotron上的背景图像，但我不确定如何做到这一点。到目前为止，我的代码将图像作为一个单独的元素粘贴在jumbotron中，但正如我所说，我真的希望这是背景图像，这样它的缩放效果会更好，并且我可以对图像进行中央验证

    <div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;">

        <img src="@Model.Artist.ArtistHeaderImage" alt="@Model.Artist.ArtistAlias" class="img-fluid" />

    </div>

忽略内联样式-我将在完成后将它们移动到类中。感谢

如果jumbotron在一个布局中，而单个视图在RenderBody中，您可以这样做

将此添加到布局中


...
@渲染部分（“样式”，false）

将此添加到您的视图中

@节样式{
琼伯伦先生{
背景图片：url（“@Model.Artist.ArtistHeaderImage”）；
背景尺寸：封面；
}
}

或者，如果您的jumbotron在视图中，只需在该元素上方或其标题上添加一个样式标记

<style>
.jumbotron {
   background-image: url("@Model.Artist.ArtistHeaderImage");
   background-size: cover;
}
</style>

<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;"></div>


琼伯伦先生{
背景图片：url（“@Model.Artist.ArtistHeaderImage”）；
背景尺寸：封面；
}

@BenWilliams嗯，我已经用了很多了，哈哈。不客气！

<head>
    ...
    @RenderSection("Styles", false)
</head>

@section Styles {
   <style>
      .jumbotron {
         background-image: url("@Model.Artist.ArtistHeaderImage");
         background-size: cover;
      }
   </style>
}

<style>
.jumbotron {
   background-image: url("@Model.Artist.ArtistHeaderImage");
   background-size: cover;
}
</style>

<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;"></div>