blocks|key|2366075|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2366076|.parent{
++background:+linear-gradient(+to+bottom,+transparent+0,+blue+100%25);
++height:+100vh;
}
.parent+.img-container{
+++width:+50vw;
+++height:+95vh;
}
.parent+.img-container+img+{
++position:+fixed;
++right:2%25;
++bottom:0px;
++z-index:+-1;

}|code-block|syntax|javascript|2366077|<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>|2366078|​|2366079|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Try this
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
      &lt;div class="img-container"&gt;
        &lt;img src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2576616|text|你在找下面这样的东西吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2576617|​|2576618|.parent-div+{
++position:+relative;
++display:+block;
++position:+fixed;
++left:+0;
++right:+0;
++bottom:+0;
++top:+0;
++width:+100%25;
++height:+100%25;
++background:+linear-gradient(white,+red);
++overflow:+hidden;
}

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

.despair-gradient+{
++position:+absolute;
++width:+100%25;
++height:+100%25;
++bottom:+0;
++background:+linear-gradient(+to+bottom,+transparent+75%25,+#1543E9+100%25);
}|code-block|syntax|javascript|2576619|<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>|2576620|2576621|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Are you looking for something like the following?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent-div"&gt;
  &lt;div class="despair-div"&gt;
    &lt;img class="monokuma-img" src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="" /&gt;
  &lt;/div&gt;
  &lt;div class="despair-gradient"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm terrible at HTML/CSS, and I'm utterly stumped by this.</p>

<p>Image requirements:</p>

<ul>
<li>Positioned in the bottom right corner

<ul>
<li>Slight spacing to right (<code>right: 2%;</code>, or similar)</li>
<li>Bottom of image flush to bottom of window</li>
</ul></li>
<li>Max-height of 95% of window </li>
<li>Max-width of 50% of window</li>
</ul>

<p>In other words, the image MUST NOT exceed half the width of any window or over 95% of the height of the window. Extra space above or to the sides are fine.</p>

<p>Gradient requirements:</p>

<ul>
<li>Transparent from top to blue bottom (<code>background: linear-gradient( to bottom, transparent 0, blue 100%);</code>)</li>
<li>Placed over the image (<code>z-index: 1;</code>)</li>
<li>Width of 100% of window at all times</li>
<li><strong>Height MATCHES the image to cover it by height exactly (i.e. The gradient must cover</strong>

<ul>
<li>In other words, the gradient must color the image the same shade at each height evenly across ALL screen proportions and sizes</li>
</ul></li>
</ul>

<p>EDIT: Another requirement, for clarification:</p>

<ul>
<li>No overflowing or scrolling. Image, divs, and gradient must be completely showing on the screen. The image is never partially hidden, and no scroll bars should appear.</li>
</ul>

<p><strong>Examples (but...):</strong></p>

<p>I don't know why jsfiddle and codepen aren't positioning correctly below. At least the positioning works fine in my local code:
This is the best I could do for now:</p>

<p><a href="https://jsfiddle.net/stevenmchoi/vkgfy1ts/17/" rel="nofollow noreferrer">https://jsfiddle.net/stevenmchoi/vkgfy1ts/17/</a></p>

<p><a href="https://codepen.io/stevenmchoi/pen/qJENmj" rel="nofollow noreferrer">https://codepen.io/stevenmchoi/pen/qJENmj</a></p>


Gradient at width 100% covering over and bound to an image with width of 50% and max-height of 90%

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我不擅长HTML/CSS，我完全被它难住了。镜像要求：位于图像右下角的图像向右略微间距( similar)Bottom，or  of window right: 2%; to window)​Max-高度为window 的95%最大- window的宽度为50%换句话说，图像不得超过任何窗口宽度的一半或窗口高度的95%...

问宽度为100%的渐变覆盖并绑定到宽度为50%、最大高度为90%的图像
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问宽度为100%的渐变覆盖并绑定到宽度为50%、最大高度为90%的图像EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问宽度为100%的渐变覆盖并绑定到宽度为50%、最大高度为90%的图像
EN