Login
网站首页 > 文章中心 > Css

CSS给网页中的图片追加文字

作者:小编 更新时间:2024-03-28 14:14:11 浏览量:64人看过
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Display Title on Image</title>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container::after {
            content: attr(data-title);
            position: absolute;
            bottom: 0;
            left: 0;
            width: 130px;
            background: rgb(164 159 159 / 70%);
            padding: 5px;
            text-align: center;
color:#fff;font-weight:bold;
font-family:  sans-serif;
        }
    </style>
</head>
<body>
    <div data-title="快穿:总裁今天爱上我了">
        <img src="/img/1006.jpg?1077" width="140px" height="180px">
    </div>
</body>
</html>


版权声明:倡导尊重与保护知识产权,本站有部分资源、图片来源于网络,如有侵权,请联系我们修改或者删除处理。
转载请说明来源于"土嘎嘎" 本文地址:http://www.tugaga.com/jishu/css/1872.html
<<上一篇 2024-01-18
>> 2023-06-28

编辑推荐

热门文章