4

複数の背景を使用しようとすると、奇妙な問題が発生します。私が望む基本的な効果は、エッジのグラデーション背景と中央の透明な背景です。本当に基本的なコードは次のとおりです。

background: transparent, linear-gradient(45deg, #f06, yellow);
background-size:50% 50%, 100% 100%;
background-position: 50% 50%, 0 0;
background-repeat: no-repeat;

私はダブレットを使って遊んでいます。そのコードを使用しても何も得られません (私はそれを見ることができることを確認してください) transparent: http://dabblet.com/gist/5339331green

ただし、背景を逆にすると（ ） 、もちろん逆になっていることを除いてbackgound: linear-gradient(45deg, #f06, yellow), green;、期待どおりに完全に機能します：http://dabblet.com/gist/5339291

何が起きてる？なぜそれは一方の方法で機能し、他方の方法では機能しないのでしょうか? また、グラデーションを単純にするために置き換えてみましたが、うまくいきblueません: http://dabblet.com/gist/5339396

参考までに、Chrome 27 でテストして!いて、警告とともに黄色が表示されますInvalid property value.

編集：これは、私が目指している効果のより良い（まだ壊れている）例です。この例では、それぞれ独自のグラデーション背景を持つ 4 つのピースがあります。理想的には私はワンピースを持っているだろう

  1. 適切に見えるグラデーションが可能になります。

  2. これは見栄えが悪く、モバイル デバイスではうまく再生できません。

  3. 可能であれば、余分な固定/絶対divを避けるとよいでしょう

4

2 に答える 2

2

お気づきかもしれませんが、transparentは のように画像の値ではなく色の値ですblue。これは色の値であるため、基本レイヤーのみが背景色を持つ可能性があるbackgroundため、省略形の最後に指定する必要があります。これが、Chrome の Web インスペクターが無効なプロパティ値を報告している理由です。

残念ながら、複数の背景を使用して 1 つの背景画像と切り取った領域を指定する方法はありません (たとえば、中央セクションにシースルーの開口部を表示するため)。

ただし、jsFiddle にあるものはステップです。代わりにandの両方に疑似要素と疑似要素divを追加することで、余分な要素を完全に簡単に取り除くことができるため、4 つの疑似要素を使用できます。シームレスに見えるように、グラデーションの背景を使用して適切に調整する必要もあります。::before::afterhtmlbodybackground-sizebackground-position

グラデーションをシームレスに保ちながら半透明にしたいので、グラデーションが重ならないようにする必要があります。これは、オフセットを調整するだけでなく、background-sizeそれに応じて簡単に実現できます。

使用したCSSは次のとおりです。

html::before, html::after, body::before, body::after {
    display: block;
    position: fixed;
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
    content: '';
}

html::before, html::after {
    height: 25%;
    left: 25%;
    right: 25%;
    background-size: 200% 400%;
}

body::before, body::after {
    width: 25%;
    top: 0;
    bottom: 0;
    background-size: 400% 100%;
}

html::before { top:    0; background-position: top;    }
html::after  { bottom: 0; background-position: bottom; }
body::before { left:   0; background-position: left;   }
body::after  { right:  0; background-position: right;  }

jsFiddle プレビュー(疑似要素をどのように配置したかを示す境界線付き)

1 つのボックスだけでこれを行うことはできないため、モバイル デバイスではうまく機能しない可能性があります。これがうまくいかない場合は、SVG 背景を使用してこれを達成できる場合があります。失敗した場合は、従来の事前にレンダリングされた背景画像を使用する必要がある場合があります。

于 2013-04-09T07:07:59.293 に答える
0

CSS のbackground省略形のプロパティ構文は次のとおりです。

background: background-color background-image background-repeat background-attachment, background-position

コンマがないことに注意してください。特に と を区切る場合は、コンマを使用しないことをお勧めしbackground-colorますbackground-image。

これらすべてを使用して、元の例に戻ります: http://dabblet.com/gist/5340042

于 2013-04-08T20:08:23.727 に答える