html - 宽度为 100% 的渐变覆盖并绑定(bind)到宽度为 50% 且最大高度为 90% 的图像

Question

我的 HTML/CSS 很糟糕，我完全被这个难住了。

图片要求:

• 位于右下角
  • 向右略微间距(right: 2%;，或类似)
  • 图像底部齐平到窗口底部
• 窗口 95% 的最大高度
• 最大宽度为窗口的 50%

换句话说，图像不得超过任何窗口宽度的一半或窗口高度的 95% 以上。上方或两侧的额外空间都可以。

渐变要求:

• 从上到下透明(背景:线性渐变(到底部，透明0，蓝色100%)；)
• 放置在图像上(z-index: 1;)
• 窗口宽度始终为 100%
• 高度匹配图像以完全覆盖它的高度(即渐变必须覆盖
  • 换句话说，渐变必须在所有屏幕比例和尺寸上均匀地在每个高度为图像着色相同的阴影

编辑:另一个要求，澄清一下:

• 没有溢出或滚动。图片、div 和渐变必须完全显示在屏幕上。图像永远不会部分隐藏，并且不应出现滚动条。

示例(但是...):

我不知道为什么 jsfiddle 和 codepen 在下面没有正确定位。至少定位在我的本地代码中工作正常:这是我现在能做的最好的事情:

https://jsfiddle.net/stevenmchoi/vkgfy1ts/17/

https://codepen.io/stevenmchoi/pen/qJENmj

Answer 1

试试这个

.parent{
  background: linear-gradient( to bottom, transparent 0, blue 100%);
  height: 100vh;
}
.parent .img-container{
   width: 50vw;
   height: 95vh;
}
.parent .img-container img {
  position: fixed;
  right:2%;
  bottom:0px;
  z-index: -1;

}

<div class="parent">
      <div class="img-container">
        <img src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="">
      </div>
    </div>