文字悬浮于图片上方

最新推荐文章于 2024-06-18 15:42:16 发布

拼命十三娘

最新推荐文章于 2024-06-18 15:42:16 发布

阅读量1.5k

点赞数 4

分类专栏：小功能文章标签：文字悬浮于图片上方

本文链接：https://blog.csdn.net/weixin_45034639/article/details/102846511

版权

小功能专栏收录该内容

8 篇文章

订阅专栏

1.加个div把图片和文字包在一起;
2.父级div设置相对定位,文字所属div采用绝对定位,并设置较高层级.
参考:

<div style="position:relative;width:100px;height:100px;">
    <img src="" alt="" />
    <div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
        文字
    </div>
</div>

<!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">
    <title>文字悬浮在图片上方</title>
    <style>
        .box {
            position: relative;
            width: 600px;
            height: 400px;
            border: 4px solid red;
        }

        .box .img {
            width: 356px;
            height: 366px;
            margin-bottom: 10px;
            float: right;
            position: relative;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.4;
            width: 100%;
            display: none;
        }
        .btn {
            color: brown;
            font-size: 30px;
        }
        .content {
            position: absolute;
            width: 540px;
            height: 320px;
            margin: 30px;
            left: 0;
            top: 0;
            border: 3px solid blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class='img'>
            <img src="./test.jpg" alt="" srcset="">
            <button class='btn'>click</button>
        </div>
        <div class="content">
            11111111111111111111111111111111111111111111111111111111111111111</div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function () {
            $('.btn').on('click', function () {
                $('img').css('display', 'block')
            })
        })
    </script>

</body>

</html>