css字在图片上的代码

CSS是网页设计中非常重要的一部分，通过CSS可以让网页的样式更加美观、整洁。CSS还可以实现很多有趣的效果，比如将文字放在图片上面。

    <div class="img-wrapper">
        <img src="example.png" alt="示例图片">
        <h2>这是图片上的标题</h2>
        <p>这是图片上的一段文字</p>
    </div>

    .img-wrapper {
        position: relative;
    }

    .img-wrapper h2,.img-wrapper p {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
        color: white;
        text-shadow: 0 0 5px rgba(0,.8);
        font-size: 24px;
        line-height: 1.6;
        text-align: center;
    }

    .img-wrapper h2 {
        font-weight: bold;
    }
@H_404_3@


以上代码将一个div包裹的图片和一段文字，通过CSS将文字放在图片的下方。首先给包裹图片的div设置了position:relative，这样可以让下面的绝对定位元素相对于这个div进行定位。然后给h2和p设置了position:absolute，通过设置bottom:0和left:0使它们定位在div的左下角。再通过设置宽度为100%、调整padding和字体样式让文字显示效果更佳。

最后还可以为h2添加一个粗体样式，让标题更加突出。通过这个方法，我们可以轻松地在图片上方添加一段文字，是网页设计更加生动、有趣。
                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。