ブートストラップデザインのHTMLカラーをエッジ - エッジで作る方法 - html、css、css3、design、twitter-bootstrap

私はHTML、CSS、およびBootstrapについてかなり初歩的な知識を持っています。ですから、用語のいずれかが間違っている場合はご容赦ください。

これはページです： http://jowoco.com/stackoverflow/scheduletech.html

大型モニター（解像度> 1500px）またはズームアウトした画面（ctrl / cmnd + "-"）を使用すると、色が停止するのがわかります。理想的には角度は継続しますが、少なくとも画面の左右に色を継続するだけでよいでしょう。固体として（モックを参照）。

修正として機能すると思われるもののスクリーンショットを添付しましたが（divかspanかはわかりません）、実際にどのように行うかはわかりません。

よろしくお願いします。 ウォジョ

回答：

これを行うにはいくつかの方法があります...しかし、はるかに簡単なのは、真っ白ではなく、ページの線形グラデーションの背景を作成することです。

これにより、ページの本体が停止している場合でも、バーを端から端まで移動できます。

残念ながら、あなたは私があなたにそのコードを単に渡すのに十分な情報を与えていません：

1. 青い縞の角度は何ですか？
2. ブラウザウィンドウのサイズが変更されると、ページのジオメトリは変更されますか？具体的には、その青いバナーはまったく動きますか？
3. どのブラウザをサポートできるようにする必要がありますか？

これらの質問に対する回答がある場合は、ここにドロップしてください。この回答を更新します。

自分でコードをクラックしたい場合は、次の場所で生成できます。 コロジラ。結果のコードは次のようになります。

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、さらにはIE6-9までのすべてのブラウザーを対象としています。

コードは、一般的に、それよりもはるかに悪く見えます...コードの大部分では、青いバーが表示される角度を直接設定できます。例外はIE6-9以前のバージョンのChromeです。

Chromeは通常、それ自体を自動更新するため、以前のバージョンのChromeはおそらくほとんど存在しません...しかし、以前のInternet Explorerは、いつものように、問題が発生する可能性があります。