时间戳

首页 > 解决方案 > 如何在角度模板而不是css文件中添加背景图像

html - 如何在角度模板而不是css文件中添加背景图像

问题描述

嗨，你能告诉我如何使用 ngfor 幻灯片/网格类添加角度背景图像是轮播。

<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" style="https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}">
           
                <div class="slider-inner h-100">
                    <h1 class="slider-text big-title title text-uppercase">{{movie?.title}</h1>
                
                <p data-animation-in="fadeInUp" data-delay-in="1.2">
                    {{movie?.overview}}
                </p>
                 
                </div>
            </div>
        


.slick-bg { padding: 100px 0 50px;width:100%; background-size: cover;background-position: center center; background-repeat: no-repeat; height: 90vh; position: relative; z-index: 1;}
.s-bg-1 { background-image: url(../images/slider/slider1.jpg); } // need to add this class url here.. https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}

标签： htmlcssangular

解决方案

您需要使用正确的角度属性来添加动态背景图像

<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" [ngStyle]="{'background-image': 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path + ')'}">
    <div class="slider-inner h-100">
        <h1 class="slider-text big-title title text-uppercase">{{movie?.title}}</h1>
        <p data-animation-in="fadeInUp" data-delay-in="1.2">
            {{movie?.overview}}
        </p>
    </div>
</div>

推荐阅读