如何使用CSS创建这种类型的卡片。

顺晟科技：

问题的纯CSS解决方案:

您可以根据需要更改

运行下面的代码段

希望它能让您了解它是如何工作的。

可以通过使它具有响应性来改进它，但这不是问题的重点。

其中一个标记是，所以我假设您正在使用它。为了获得整个效果，我使用了一些引导类来获得基本的，并将图像“外部”获得一点，只是一个负边距。

检查下面的演示。

1. 您可以创建包含蓝框、女人、文本和白色背景的图像（都作为一个图像）

2. 蓝色框，文本由CSS定位，顶部为透明背景的女性图像

3. 透明女性图像，另有图像（蓝色框和文本）作为背景-图像