宽度为100%的渐变覆盖并绑定到宽度为50%、最大高度为90%的图像
宽度为100%的渐变覆盖并绑定到宽度为50%、最大高度为90%的图像
提问于 2018-09-29 13:40:01
我不擅长HTML/CSS，我完全被它难住了。
镜像要求：
位于图像右下角的图像向右略微间距( similar)
- Bottom，or
- of window
right: 2%;to window
)
- Max-高度为window
- 的95%最大- window
的宽度为50%
换句话说，图像不得超过任何窗口宽度的一半或窗口高度的95%。在上方或两侧留出额外的空间也可以。
渐变要求：
在所有窗口的100%窗口的图像(z-index: 1;)
- Width上从上到下透明的渐变times
- Height匹配图像以精确地通过高度覆盖它(即，渐变必须覆盖
- 换句话说，渐变必须在所有屏幕比例和sizes
上均匀地在每个高度为图像着色相同的阴影
编辑:另一个要求，为了澄清：
- 无溢出或滚动。图像、div和渐变必须完全显示在屏幕上。图像永远不会部分隐藏，也不应显示任何滚动条。
示例(但是...)：
我不知道为什么jsfiddle和codepen在下面没有正确定位。至少定位在我的本地代码中工作得很好:这是我目前所能做的最好的事情：
回答 2
Stack Overflow用户
发布于 2018-09-29 14:32:45
尝尝这个
.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>
Stack Overflow用户
发布于 2018-09-29 14:35:33
你在找下面这样的东西吗？
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52565471
复制相关文章
相似问题