0

我对 HTML、CSS 和 Bootstrap 有相当基本的了解。因此，如果任何术语有误，请原谅我。

这是页面：http: //jowoco.com/stackoverflow/scheduletech.html

在大型显示器（分辨率 > 1500 像素）或缩小屏幕（ctrl/cmnd +“-”）上，您会看到颜色停止。理想情况下，角度会继续，但至少让颜色在屏幕的左侧和右侧继续作为实体（参见模拟）会很好。

我附上了我认为可以作为修复工作的屏幕截图（不确定它是 div 还是 span），但不确定如何在实际实践中做到这一点。

说明问题的干净屏幕截图 带注释的建议解决方案 - 不确定如何在实践中编码

非常感谢您的帮助和时间，Wojo

4

1 回答 1

1

有几种方法可以做到这一点......但到目前为止最简单的是为页面创建线性渐变背景，而不是纯白色。

即使页面的主体停止，这将允许栏从一个边缘移动到另一个边缘。

不幸的是，您没有提供足够的信息让我简单地将代码交给您：

  1. 蓝色条纹的角度是多少？
  2. 调整浏览器窗口大小时，页面的几何形状是否会发生变化？具体来说，那条蓝色横幅会移动吗？
  3. 您需要能够支持哪些浏览器？

如果您对这些问题有答案，请随时将它们放在这里，我会更新这个答案。

如果您想自己破解代码，可以在Colorzilla生成 is 。生成的代码将如下所示：

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(45deg,  #ffffff 50%, #91b5b5 50%, #91b5b5 71%, #ffffff 71%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#ffffff), color-stop(50%,#91b5b5), color-stop(71%,#91b5b5), color-stop(71%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* IE10+ */
background: linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

这段代码涵盖了 Firefox 之间的所有浏览器、早期和最近的 Chrome，甚至包括 IE 6-9。

代码一般看起来比实际差很多……对于大部分代码，您可以直接设置蓝条应该出现的角度；IE6-9 和更早版本的 Chrome 除外。

早期版本的 Chrome 可能几乎不存在，因为 Chrome 通常会自动更新……但早期的 Internet Explorer 一如既往地可能会出现问题。

于 2013-08-23T02:21:19.570 回答