HTML CSS将图像分成两半(都有覆盖文本)并放置在不同的位置[关闭]

zkure5ic  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(122)

已关闭,此问题需要更focused。目前不接受答复。
**想改善这个问题吗?**更新问题,使其仅通过editing this post关注一个问题。

5年前关闭。
Improve this question
I want to split this image into half in mobile view and display each of these halves at upper left and bottom left respectively of the same div
Rough idea how it should look like
变成这样

zqry0prt

zqry0prt1#

希望这有帮助!!

.slice{
    width:238px;
    height:544px;
    overflow:hidden;
    position: relative;
}

.slice img {
    position: absolute;
}

.right-half {
    position: absolute;
    right: 0;
}

.bottom {
  float:right;
  
}
<div class="box">
<div class="slice">
    <img src="https://i.stack.imgur.com/UHwtV.png" /> 
</div>

<div class="slice bottom">
    <img class="right-half" src="https://i.stack.imgur.com/UHwtV.png" /> 
</div>
</div>

相关问题