淘先锋技术网

首页 1 2 3 4 5 6 7

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属性将文字居中。