css在图上写文字 |css入门主页模板

/* 将文字放在图片上 */
.image-with-text {
position: relative;
}
.image-with-text img {
display: block;
}
.image-with-text p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代码中，大家首先使用relative让图片容器成为相对定位的元素，这样就能让其内部的p标签使用绝对定位位置更准确。然后设置图片为块级元素，以确保其下文区域的正确计算。

接下来，大家通过给p标签设置绝对定位，并且把top和left都设为50%来水平垂直居中p标签。最后利用CSS transform属性中的translate函数，微调p标签的位置以更好地展现文字。

/* 在图片上加入半透明黑色背景 */
.image-with-text {
position: relative;
}
.image-with-text img {
display: block;
}
.image-with-text .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
padding: 20px;
color: #fff;
}

如果大家想进一步改进图上文字的效果，可以考虑在文字上加上背景。这样可以让文字更加清晰，避免因为背景和图片相似而产生阅读困难。

上面的代码中，大家为文字容器添加了一个名为.text的类选择器，并在其中添加了背景、填充和颜色等样式属性。

在实践中，不同的图文组合需要不同的CSS样式来达到最佳效果。大家可以根据实际需要进行调整和修改，使得文字和图片更加和谐地结合在一起。