web-dev-qa-db-ja.com

中央/中央からの線形グラデーションの背景

画面の中央/中央から始まる線形グラデーションの背景を使用する方法はありますか？

これは私の現在のCSSです：

body {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 800px;
    background: blue;
    background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
    background: linear-gradient(to left, black, blue, blue, black 800px);
}

グラデーションbgは800px（私が欲しいもの）の後で停止していますが、Webページのコンテンツの後ろではなく、画面の右側にあります。他の場所に移動することはできません。また、ウィンドウサイズに応じて、コンテンツからさまざまな距離で表示されます。コンテンツの後ろの中央に固定する必要があります。

たぶん次の行のようなものが存在しますか？

background: linear-gradient(to sides, blue, black 400px);

したがって、線形グラデーションの開始位置を中央に設定し、ブラウザにそれを両側で実行させる必要があります。中心から400pxは停止する場所です（その後、最後の色を使用します）。したがって、合計800pxの幅のグラデーションが必要です。

htmlcssbackgroundlinear-gradients
7
JaSon

私があなたの要求を正しく理解しているなら、これはあなたが望むものです：

body, html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  background-image: linear-gradient(to right, black, blue 400px, black 800px);
  background-size: 800px 100%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
9
vals

このようなものを試してください

background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);

パーセンテージを使用すると、ページが確実に拡大縮小され、画面の左右の4分の1が黒くなり、中央の半分が青になります。

2
user5374622