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

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 我能够解决我的问题。这是完成的片段。

.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>

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

Apply background gradient only over no-repeat background image

css

linear-gradients