仅在无重复背景图像上应用背景渐变

Question

我正在尝试将背景图像插入元素的右上角并使用渐变淡化它。问题是渐变会延伸到整个元素，而不仅仅是在不重复的图像上。

.bg {
    /* manually set size for demostration purposes */
    width: 800px;
    height: 1600px;
    
    background-repeat: no-repeat;
    background-position-x: right;
    background-color: rgba(66, 66, 66, 1);
    background-image: linear-gradient(45deg, rgba(66, 66, 66, 1), rgba(66, 66, 66, 0.8)), url("https://img.scryfall.com/cards/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1562933099");
}

<div class="bg" />

Answer 1

感谢this answer 我能够解决我的问题。到这里就完成了sn-p。

.bg {
  /* manually set size for demostration purposes */
  width: 800px;
  height: 600px;
  position: relative;
  background-color: #424242;
}

.image {
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
}
    
.image:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: radial-gradient(ellipse at top 35% right 35%, rgba(66,66,66,0.8) 0%, #424242 70%);
}

.image img {
  width: 100%;
}

<div class="bg">
  <div class="image">
    <img src="https://img.scryfall.com/cards/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1562933099" />
  </div>
</div>