【问题标题】:Apply background gradient only over no-repeat background image仅在无重复背景图像上应用背景渐变
【发布时间】:2019-12-29 18:16:14
【问题描述】:

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

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

【问题讨论】:

    标签: css linear-gradients


    【解决方案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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-03-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-05-11
      相关资源
      最近更新 更多