引导登陆页面背景答案

【问题标题】：Bootstrap Landing Page Background引导登陆页面背景
【发布时间】：2022-01-30 08:48:45
【问题描述】：

我正在学习根据在线优秀示例创建登录页面。我试图复制的一件事是bootstrap 页面（有角度的图形）上“使用 Bootstrap 构建快速、响应式网站”字样背后的浅色背景。

在查看此示例中的页面源代码时，我并不清楚这是如何完成的。任何人都可以建议或指出一个可以帮助我学习这个概念的好资源吗？

我的网站目前是使用 Bootstrap 4 构建的，希望能够保持在该框架内。

【问题讨论】：

【解决方案1】：

背景颜色可以通过使用轻松解决 ".bg-light" 作为背景颜色类。解决形状的最简单方法是绘制一个矩形，将其旋转到指定的度数，然后以完全适合您想要的方式放置它，在这里您可以使用 ".absolute top-0 left-0 translate-middle" 和这样的引导类。阅读更多关于Bootstrap Positioning here 至于旋转，最简单的解决方法是使用Bootstrap Extension.，它提供了用于旋转html元素的引导类。阅读上面链接中的文档

【讨论】：

【解决方案2】：

您正在寻找的是background: linear-gradient(...)。示例background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%);（这是您引用的引导站点上使用的内容）。你可以了解更多https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

【讨论】：