如何在元素上應用以下樣式？

Question

我有angular2應用一個要素如下，

<div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> 

上述風格，我想添加下面的樣式，

background: 
    /top, transparent red/
    linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ) 

} 

Answer 1

var app = angular.module('App', []); 
 
app.controller('Ctrl', ['$scope', function($scope){ 
 
    $scope.gradient = "linear-gradient(to bottom, rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 1))"; 
 
}]);

.box { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="box" ng-app="App" ng-controller="Ctrl" ng-style="{'background': gradient}"></div>

使用基本將字符串插入到ngStyle指令中的角度語法。