怎么能达到这种样式 上下两张图片 类似无缝拼接

下面是需要达到的样式

img


图片素材

img

img


上面 下面分别是两张图片，要有阴影 且分别可以点击

建议整为一张图片，作为容器背景，容器relative定位，文字放到div中absolute定位到需要的位置。2张可以用relative丁文，js按缩放比率计算得到margin-top，设置为负值将下面的图片往上移动，示例如下

img

<meta name="viewport" content="width=device-width" />
<meta name="referrer" content="never">
<style>
    body{background:#eee}
    .container{padding:10px}
    .container >div{position:relative}
    .container img{max-width:100%;display:block}
</style>
<div class="container">
    <div>
        <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/292289551546178.png" />
    </div>
    <div id="dvFoot">
        <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/600679551546177.png" />
    </div>
</div>
<script>
    var blankHeight = 265, defaultMT = 240, dvFoot = document.querySelector('#dvFoot'), img = dvFoot.querySelector('img');
    //通过计算图片缩放比率得到要设置的margin-top
    img.onload = function () {
        dvFoot.style.marginTop = '-' + Math.floor(defaultMT * img.width / img.naturalWidth) + 'px';
    }
    window.onresize = function () {
        dvFoot.style.marginTop = '-' + Math.floor(defaultMT * img.width / img.naturalWidth) + 'px';
    }

</script>

img

你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style>
    body {
        background-color: #eef;
    }
    .imgbox {
        padding:10px;
    }
    .imgbox .img2 {
        margin-top: -20%;
    }
    .imgbox img{
        width:100%;
        display: block;
        filter: drop-shadow(0 0 7px #99c);
    }
</style>
<div class="imgbox">
    <img class="img1" src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/292289551546178.png" />
    <img class="img2" src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/600679551546177.png" />
</div>

</body>
</html>

img

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

能让设计剪裁一下图吗。另外阴影独立一张图，上面部分，门店自取的图和阴影的图 叠起来放置，计算一下手点击区域然后显示阴影的那张图。下面部分同理。