css 文字覆盖图片吗 |css div导航自动宽度

/* CSS代码 */
.container {
position: relative;
}
.container img {
width: 100%;
height: auto;
 }
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #fff;
text-align: center;
background-color: rgba(0,0,0,0.5);
padding: 10px;
}

首先，在HTML文件中创建一个容器，这里偶用类名为container来命名，用于包含图片和文字。接着，在CSS样式中利用position:relative给外层容器添加相对定位。随后，在CSS样式中针对img元素使用width: 100%和height: auto来设置图片的大小，使图片能够自适应大小。

最后，大家在CSS样式中为p标签添加了绝对定位，通过top和left属性进行定位，利用transform属性进行居中处理，再添加文字样式和背景颜色即可，这里偶设定了文字为24px、白色，且背景颜色为黑色带有0.5的透明度，用于凸显文字效果。”>

以上就是利用CSS实现文字覆盖图片的一种方法。如果需要实现长文本显示的效果，还可以利用text-overflow:ellipsis;来实现文字省略号效果，让整个页面效果更加优美。