css怎样在图片上加文字 |css3 图片扭曲

/* 1. 创建一个带背景图片的div */
div {
background-image: url('example.jpg');
width: 400px;
height: 300px;
}
/* 2. 使用绝对定位的方式来放置文字 */
div span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
}

以上代码首先创建了一个div，并将其背景图片设置为example.jpg。接着，使用绝对定位的方式来放置文字，使用transform属性来将文字定位到图片中心。

最后，将要显示的文本放在一个span标签中，使用CSS设置文字的样式，如颜色、字号、字重等。

需要注意的是，上述代码中的文字是写死的，如果需要动态地在图片上加文字，则需要结合JavaScript来实现。

总之，CSS在图片上添加文字是一种非常实用的技巧，它可以让图片更加丰富、生动，让网页更具表现力。