0

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

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

大きなモニター (解像度 > 1500px) またはズームアウトした画面 (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 はおそらくほとんど存在しません。

于 2013-08-23T02:21:19.570 に答える