首页 > 代码库 > css 中在图片中加入文字的方法

css 中在图片中加入文字的方法

2024-08-12 09:09:11   220人阅读

父div 相对定位

子 div 绝对定位(文字的话span标签即可）

子div 可以是多个，实现div同位置叠加

<div class=‘a‘>    <div class=‘b‘></div>    <div class=‘c‘>        <span>文字</span>    </div>    <div class=‘d‘></div></div>
    .a{        width:400px;        height:400px;        position:relative;    }    .b{        width: 100%;        height:100%;        background:orange;    }    .c span{        display: block;        padding-top: 40%;        text-align: center;        z-index: 5;        position: absolute;        top:0px;        left: 0px;        width: 100%;        color: #fff;    }    .d{        position: absolute;        top:0px;        left: 0px;        width: 100%;        height: 100%;        background:black;        opacity: 0.5;        z-index: 3;    }

 

css 中在图片中加入文字的方法


联系
我们