我可以將徑向漸變放入圖像中嗎

Question

我有這個HTML代碼

<div class="right">
     <div class="img">
          <img ng-src="{{ticket.thumbnail}}">
     </div>
</div>

而這個scss

.right{
      width: 25vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;

      background-image: radial-gradient(circle at 0% 0%, $mainBackground 9px, transparent 9px),
      radial-gradient(circle at 0% 100%, $mainBackground 9px, $footer 9px);
      .img{
        overflow: hidden;
        display: flex;
        justify-content: center;

        img{
          height: 16.2vh;
        }
      }

    }

結果是：

我希望兩個邊界都像正確的邊界。 我知道要有扎實的背景，但不能有圖像。 我知道要做的是：

太感謝了

已編輯

我試圖將圖像放置為.right類的背景：

<div class="right" ng-style="{'background-image' : 'radial-gradient(circle at 0% 0%, #150357 9px, transparent 9px),
          radial-gradient(circle at 0% 100%, #150357 9px, url({{ticket.thumbnail}}) 9px)'}">

</div>

問題是它什么也沒顯示：

html輸出為：

我想，如果我可以在背景中顯示圖像，它應該像需要的那樣工作。

Answer 1

不，我無法在圖像中做到這一點。 我應該先編輯