Я реализовал компонент ngx-file-drop
в приложении angular 7, которое позволяет перетаскивать файлы для загрузки. Мне нужно изменить фон области содержимого, где в то время как сбрасываются с изображением. Я попытался css
, а также присвоить contentClassName
свойство, как
contentClassName = "upload-background-image"
.upload-background-image {
background-image: "./images/spritemap.png"
Фоновое изображение не применяется. Как мне это сделать. Вот это stackblitx
HTML
<div class="center" class="file-upload-wrapper">
<ngx-file-drop
dropZoneLabel="Drop files here"
multiple="true"
(onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)"
(onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
Optional custom content that replaces the the entire default content.
<button type="button" (click)="openFileSelector()">Browse Files</button>
</ng-template>
</ngx-file-drop>
<div class="upload-table">
<table class="table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody class="upload-name-style">
<tr *ngFor="let item of files; let i=index">
<td><strong>{{ item.relativePath }}</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
Когда я пытаюсь применить следующий CSS, он все еще не применяется
.ngx-file-drop__drop-zone {
margin: 20px;
height: 250px;
background: #333;
color: #fff;
border: 5px dashed rgb(235, 79, 79);
border-radius: 5px;
font-size: 20px;
}
Скриншот того, как выглядит элемент html
