css图上加内容 |css动画图片展开

img{
position: relative;
}
img::after{
content: "这是在图片上添加的内容";
position: absolute;
bottom: 0;
background-color: rgba(0,0,0,0.7);
color: #fff;
width: 100%;
text-align: center;
font-size: 20px;
}

上面的代码中，大家先将图片的position属性设置为relative，这样就可以使用相对定位的方式来添加内容了。然后使用伪元素::after来对图片进行修饰。大家将内容添加到伪元素中的content属性中，然后将伪元素的position属性设置为absolute，这样就可以脱离文档流并相对图片进行定位了。在这里大家设置了文字在图片底部，背景颜色为半透明的黑色，文字颜色为白色，宽度为100%（与图片等宽），居中显示，字体大小为20px。在实际应用中，可以根据需求进行样式的调整。

除了使用::after伪元素，大家还可以使用::before伪元素来添加内容，方法与上面类似，只需要将::after改为::before即可。

在实际应用中，大家可以结合JS来动态添加内容，实现更为丰富的交互效果。同时，大家也可以使用CSS的transform属性对内容进行旋转、缩放等操作，使其更具视觉吸引力。