按钮img重叠到一张图片上

最新推荐文章于 2021-05-31 08:25:24 发布

偷走你的笑

最新推荐文章于 2021-05-31 08:25:24 发布

阅读量2.1k

点赞数

分类专栏：深蓝的大学

本文链接：https://blog.csdn.net/weixin_42680298/article/details/89384779

版权

深蓝的大学专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>Vue</title>
</head>

<body>
    <div id="app">
        <div class="center">
            <img src="src/assets/img/quick-defaultImg.png" alt="">
            <span class="close"><img src="src/assets/img/delete_btn.png" alt=""></span>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            }
        })
    </script>
</body>

<style>
.center{
    position: relative;
    width: 120px;
    height: 120px;
    top: 100px;
    left: 50%;
}
.close{
    position: absolute;
    top: 0;
    right: 0;
}
</style>
</html>

定义一个块级元素center，它的定位为相对定位，按钮img的定位为绝对定位，即可实现按钮在img上的情况，如果要控制按钮位置的话还需要注意center的width和height，这样可以保证底层img大小刚好为div大小。
浏览器中打开效果如图：
在这里插入图片描述

偷走你的笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
按钮img重叠到一张图片上

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://unpkg.com/vue"></script> <tit...
复制链接

扫一扫