使用引导程序定位背景答案

【问题标题】：Position a background using bootstrap使用引导程序定位背景
【发布时间】：2016-01-18 19:35:07
【问题描述】：

我正在使用 Bootstrap（3 或 4），并希望有一条贯穿整个页面宽度的对角线，中间或多或少位于固定宽度内容区域的中心（有时是文本，有时是图像），即使调整了浏览器窗口的大小。我有一张我想象的完成后的样子：

An image of what this looks like

我一直在使用三角形的白色 SVG 来制作角度，但我无法将其保持在框架中。无论窗口大小如何，线条的角度都应保持不变。

【问题讨论】：

您可以在 100% 宽度和高度的 div 或 body 上使用背景大小的包含或覆盖模式。你试过了吗？
好主意。我在原始帖子中添加了一些信息，但无论窗口大小如何，我都希望线条的角度保持不变。另外，因为这是响应式的，所以我不知道内容的大小或它的确切位置。
好的，我的理解是当你调整它的大小时，svg 中的角度会动态变化。所以你应该创建一个静态图像，或者使用渐变创建你的背景图像。
@st.那很有意思。我尝试了渐变（背景：linear-gradient(-7deg, #2989d8 0%,#2989d8 50%,#ffffff 50.1%,#ffffff 100%）；它不会扭曲，但它不是一条平滑的线这也是我使用 SVG 的原因。我可以使用 .png，但我担心为了保持外观，文件必须为 8000 像素宽才能在视网膜大屏幕上显示。
好吧，你有第三个选项，这有点老套，但是你可以将你的 svg 宽度固定为 8000 像素，将高度固定为它应该的值。并像使用它的 png 文件一样使用它。这样你可以节省一些带宽和内存。我真的想不出任何其他选择:)

标签： twitter-bootstrap css twitter-bootstrap-3 background-image

【解决方案1】：

好的，我们开始吧。

我为您制作了一个 svg 文件，您可以随意更改其大小或颜色。

<svg id="backgroundImage" width="100%" viewBox="0 0 1280 720" style="position: fixed; top:0px; left:0px">
  <polygon points="0,0 0,500 1280,350 1280,0" style="fill:#2989d8;stroke:transparent;stroke-width:0" />
</svg>

我所做的是，首先定义一个 viewBox 作为我们的 svg 边界。然后将 svg 的宽度设置为 100%。也将位置设置为固定，设置顶部和左侧为 0 像素。

然后我绘制一个多边形，它实际上不是基于角度的，它是一个固定大小的多边形。因此，当它的容器大小发生变化时，它只会相应地缩放。

您可以在下面的链接上看到它正在运行。

http://codepen.io/st-/full/wMPayV/

【讨论】：