Динамически добавлять css фоновое изображение к bootstrap 4 jumbotron, используя MVC - PullRequest
Новая
       30

Динамически добавлять css фоновое изображение к bootstrap 4 jumbotron, используя MVC

1 голос
/ 07 апреля 2020

Я пытаюсь динамически изменить фоновое изображение на 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 {
 background-image: url("@Model.Artist.ArtistHeaderImage");
 background-size: cover;
}

Игнорировать встроенные стили - я переместу их в класс, как только закончу. Спасибо

1 Ответ

1 голос
/ 07 апреля 2020

Если jumbotron находится внутри макета, а отдельные виды внутри RenderBody, вы можете сделать;

  1. Добавить это в макет 
<head>
    ...
    @RenderSection("Styles", false)
</head>
Добавьте это к вашему представлению 
@section Styles {
   <style>
      .jumbotron {
         background-image: url("@Model.Artist.ArtistHeaderImage");
         background-size: cover;
      }
   </style>
}

Или, если ваш 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>
...