宽度为 100% 的渐变覆盖并绑定到宽度为 50% 且最大高度为 90% 的图像答案

【问题标题】：Gradient at width 100% covering over and bound to an image with width of 50% and max-height of 90%宽度为 100% 的渐变覆盖并绑定到宽度为 50% 且最大高度为 90% 的图像
【发布时间】：2018-09-29 05:40:00
【问题描述】：

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

图片要求：

位于右下角
- 向右略微间隔（right: 2%; 或类似）
- 图像底部与窗口底部齐平
95% 窗口的最大高度
最大宽度为 50% 的窗口

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

梯度要求：

从上到下透明 (background: linear-gradient( to bottom, transparent 0, blue 100%);)
放置在图片上 (z-index: 1;)
始终为 100% 的窗口宽度
高度匹配图像以完全覆盖它（即渐变必须覆盖
- 换句话说，渐变必须在所有屏幕比例和尺寸上均匀地为每个高度的图像着色相同的阴影

编辑：另一个要求，澄清：

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

示例（但...）：

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

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

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

【问题讨论】：

标签： html css image gradient linear-gradients

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

【讨论】：

【解决方案2】：

您是否正在寻找类似以下的内容？

.parent-div {
  position: relative;
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, red);
  overflow: hidden;
}

.monokuma-img {
  position: absolute;
  max-width: 50%;
  max-height: 95%;
  right: 2%;
  bottom: 0px;
}

.despair-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: linear-gradient( to bottom, transparent 75%, #1543E9 100%);
}

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

【讨论】：