css图片右上方显示文本 |css分类代码查询

.container {
position: relative;
display: inline-block;
}
.text {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 5px;
}
img {
display: block;
width: 100%;
height: auto;
}

上述代码中，大家首先需要将包含图片和文本的容器设置为相对定位，这样，内部元素的绝对定位会基于此容器；然后在文本元素中设置绝对定位，使其位于容器的右上角，同时设置背景色、文字颜色和内边距，使其更加美观。最后，为图片设置为块级元素，使其占据容器的全部宽度，并保持高度自适应。

使用上述代码，大家可以轻松地在图片上方显示任意文本，使页面更加丰富多彩。