三层效果：img+background+文字居中显示

最新推荐文章于 2021-10-05 18:21:40 发布

Summer丶羽

最新推荐文章于 2021-10-05 18:21:40 发布

阅读量551

点赞数

分类专栏： CSS布局文章标签： bootstrap 画廊 CSS 文字居中 CSS布局

本文链接：https://blog.csdn.net/qq_42779222/article/details/90743841

版权

本文介绍了如何使用CSS实现三层效果，包括img、背景和文字居中显示。通过调整container-fluid、row和col-md-4的padding，设置img的max-width和height，以及使用background、position和flex布局来实现文字居中。同时，文章还展示了如何通过CSS添加hover效果，使背景出现、字体显示，并创建了一个图片画廊的简单交互。

摘要由CSDN通过智能技术生成

三层效果：img+background+文字居中显示
①布局：
在这里插入图片描述
②先使container-fluid、row、col-md-4的padding-left和padding-right为0
③设置img的max-width：100% height:auto，这样img会撑开col-md-4的容器
④设置col-md-4的background，但是这样是看不到的，只有在img中加opacity为0才能看到。
⑤现在剩下的就是文字居中显示了，
首先加position：absolute，会看到文字在图片的下方
再设置width：100% ，height：100%,会得到跟图片同等大小的区域
之后设置bottom：0，这样会和img区域重叠在一起
最后居中显示：就需要用到flex布局了（绝对定位也可以）
Display：flex
justify-content: center;
align-items: center;
flex-direction: column;
效果如下：
在这里插入图片描述
⑥现在剩下hover的效果：
背景出现+字体出现+隐约可以看到img
思路：hover的时候img加opacity:0.2，这样就可以看到img和背景，字体加opacity:1,(hover之前是0)
Css如下：

⑦具体的css代码：