CSS中可以直接在图片内部写文字,这对于网页设计常常是必不可少的。下面我们就来介绍一下如何使用CSS在图片内部写文字。
HTML代码: <div class="container"> <img src="img/bg.jpg" alt="背景图片"> <div class="text">这是一段图片内部的文字</div> </div> CSS代码: .container { position: relative; /* 父元素设置为相对定位 */ } .text { position: absolute; /* 子元素设置为绝对定位 */ top: 50%; /* 上下居中 */ left: 50%; /* 左右居中 */ transform: translate(-50%, -50%); /* 平移 */ color: #fff; /* 文字颜色 */ font-size: 24px; /* 文字大小 */ font-weight: bold; /* 文字加粗 */ text-align: center; /* 文字居中 */ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* 文字阴影 */ }
以上代码就可以实现在图片内部写文字了。需要注意的是,父元素必须要设置为相对定位,子元素则需要设置为绝对定位,并且使用top、left和transform属性将文字居中。